<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.labelfrm {
display:block;
font-size:small;
margin-top:5px;
}
.error {
font-size:small;
color:red;
}
.h1 {
font-family:\'Times New Roman\', Times, serif;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<title>Validasi Form dengan jQuery</title>
</head>
<body>
<div class="container-fluid">
<center><h1>Data Mahasiswa</h1></center>
<form id="form-mhs">
<div class="form-group">
<label class="labelfrm">NRP</label>
<input class="required form-control" size="15" type="text" name="nrp" id="nrp" maxlength="14" required>
</div>
<div class="form-group">
<label class="labelfrm">Nama</label>
<input size="30" class="required form-control" type="text" name="nama" id="nama" maxlength="50" required>
</div>
<div class="form-group">
<label class="labelfrm">Alamat</label>
<textarea cols="40" rows="4" class="required form-control" name="alamat" id="alamat" required></textarea>
</div>
<div class="row row-space">
<div class="col-2">
<div class="form-group">
<label class="labelfrm">Tanggal Lahir</label>
<input size="15" class="required form-control" type="date" name="tanggal" id="tanggal" required>
</div>
</div>
<div class="col-2">
<div class = "form-group">
<label class="labelfrm">Umur</label>
<input size="15" class="required form-control" type="number" name="umur" id="umur" required>
</div>
</div>
</div>
<div class = "form-group">
<label class="labelfrm">Email</label>
<input size="50" class="required form-control" type="email" name="email" id="email" required>
</div>
<div class = "form-group">
<label class="labelfrm">Situs Website</label>
<input size="50" class="form-control" type="url" name="situs" id="situs" required>
</div>
<div class = "form-group">
<label class="labelfrm">Password</label>
<input size="15" class="required form-control" type="password" name="password1" id="password1" required>
</div>
<div class = "form-group">
<label class="labelfrm">Konfirmasi Password</label>
<input size="15" class="required form-control" type="password" name="password2" id="password2" required>
</div>
<div class="p-t-15">
<input type="submit" name="Submit" value="Simpan" class="btn btn-primary"/>
</div>
</form>
<br/>
<br/>
<br/>
<br/>
<center><a href="index.php" class="btn btn-primary">Menuju Tugas ke 1</a></center>
<br/>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(\'#form-mhs\').validate({
rules: {
nrp: {
digits: true,
minlength: 14,
maxlength: 14
},
umur: {
digits: true,
range: [0, 100]
},
email: {
email: true
},
situs: {
url: true
},
password2: {
equalTo: "#password1"
}
},
messages: {
nrp: {
required: "Kolom NRP harus diisi",
minlength: "Kolom NRP harus 14 digit",
maxlength: "Kolom NRP harus 14 digit"
},
nama: {
required: "Kolom nama harus diisi"
},
alamat: {
required: "Kolom alamat harus diisi"
},
tanggal: {
required: "Kolom tanggal lahir harus diisi",
},
umur: {
required: "Kolom umur harus diisi"
},
email: {
required: "Kolom email harus diisi",
email: "Masukkan format email dengan benar"
},
situs: {
required: "Kolom situs website harus diisi",
url: "Masukkan format situs website dengan benar"
},
password1: {
required: "Kolom password harus diisi"
},
password2: {
required: "Kolom konfirmasi password harus diisi",
equalTo: "Password tidak sama"
}
}
});
});
</script>
</body>
</html>