Tugas 7 Pemrograman Web C: Validasi JQuery
index.html:
1: <html>
2: <head>
3: <title>Validasi Form dengan JQuery Validation - Achmatim.Net</title>
4: <script type="text/javascript" src="jquery/jquery.min.js"></script>
5: <script type="text/javascript" src="jquery/jquery.validate.js"></script>
6: <script type="text/javascript">
7: $(document).ready(function() {
8: $('#frm-mhs').validate({
9: rules: {
10: nim : {
11: digits: true,
12: minlength:10,
13: maxlength:10
14: },
15: tgl : {
16: indonesianDate:true
17: },
18: umur: {
19: digits: true,
20: range: [0, 100]
21: },
22: email: {
23: email: true
24: },
25: situs: {
26: url: true
27: },
28: pass2: {
29: equalTo: "#pass1"
30: }
31: },
32: messages: {
33: nim: {
34: required: "Kolom nim harus diisi",
35: minlength: "Kolom nim harus terdiri dari 10 digit",
36: maxlength: "Kolom nim harus terdiri dari 10 digit"
37: },
38: email: {
39: required: "Alamat email harus diisi",
40: email: "Format email tidak valid"
41: },
42: pass2: {
43: equalTo: "Password tidak sama"
44: }
45: }
46: });
47: });
48: $.validator.addMethod(
49: "indonesianDate",
50: function(value, element) {
51: // put your own logic here, this is just a (crappy) example
52: return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
53: },
54: "Please enter a date in the format DD/MM/YYYY"
55: );
56: </script>
57: <style type="text/css">
58: .labelfrm {
59: display:block;
60: font-size:small;
61: margin-top:5px;
62: } .error { font-size:small; color:red; }
63: </style>
64: </head>
65: <body>
66: <h1>Input Data Mahasiswa</h1>
67: <form action="proses.php" method="post" id="frm-mhs">
68: <label for="nim" class="labelfrm">NIM: </label>
69: <input type="text" name="nim" id="nim" maxlength="10" size="15" class="required"/>
70: <label for="nama" class="labelfrm">NAMA: </label>
71: <input type="text" name="nama" id="nama" size="30" class="required"/>
72: <label for="alamat" class="labelfrm">ALAMAT: </label>
73: <textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
74: <label for="tgl" class="labelfrm">TANGGAL LAHIR: </label>
75: <input type="text" name="tgl" id="tgl" maxlength="10" size="15" class="required"/>
76: <label for="umur" class="labelfrm">UMUR: </label>
77: <input type="text" name="umur" id="umur" maxlength="3" size="7" class="required"/>
78: <label for="email" class="labelfrm">ALAMAT EMAIL: </label>
79: <input type="text" name="email" id="email" size="50" class="required"/>
80: <label for="situs" class="labelfrm">ALAMAT SITUS: </label>
81: <input type="text" name="situs" id="situs" size="50" class="required"/>
82: <label for="pass1" class="labelfrm">PASSWORD: </label>
83: <input type="password" name="pass1" id="pass1" size="15" class="required"/>
84: <label for="pass2" class="labelfrm">ULANGI PASSWORD: </label>
85: <input type="password" name="pass2" id="pass2" size="15" class="required"/>
86: <label for="submit" class="labelfrm"> </label>
87: <input type="submit" name="Submit" value="Submit"/>
88: </form>
89: </body>
90: </html>
Link Repository: https://github.com/brianakbar/Tugas7_PWebC_ValidasiJQuery
Link Website: https://brianakbar.github.io/Tugas7_PWebC_ValidasiJQuery/
Screenshot:
Comments
Post a Comment