Tugas JQuery
Nama : Muhammad Zufarrifqi Prakoso
NRP : 5025201276
Di tugas ini diminta untuk membuat validasi form dalam JQueryberikut merupakan hasil pengerjaannya
Dokumentasi :
index.html :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>jQuery Validation - Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <style> | |
| .error{ | |
| color: red; | |
| font-style: italic; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class = "container"> | |
| <div class = "col-md-6 col-md-offset-3"> | |
| <div class = "panel panel-primary"> | |
| <div class = "panel-heading"> | |
| Registration | |
| </div> | |
| <div class = "panel-body"> | |
| <form id = "registration"> | |
| <label for="nim" >NIM: </label> | |
| <input type="text" class="form-control" name="nim" id="nim" placeholder="NIM" maxtlengh="10" size="15"/> | |
| <br/> | |
| <label for="nama" class="labelfrm">NAMA: </label> | |
| <input type="text" class="form-control" name="nama" id="nama" size="30"/> | |
| <br/> | |
| <label for="alamat" class="labelfrm">ALAMAT: </label> | |
| <textarea name="alamat" class="form-control" id="alamat" cols="40" rows="4"></textarea> | |
| <br/> | |
| <label for="tgl" class="labelfrm">TANGGAL LAHIR: </label> | |
| <input type="text" class="form-control" name="tgl" id="tgl" maxlength="10" size="15"/> | |
| <br/> | |
| <label for="umur" class="labelfrm">UMUR: </label> | |
| <input type="text" class="form-control" name="umur" id="umur" maxlength="3" size="7"/> | |
| <br/> | |
| <label for="email" class="labelfrm">ALAMAT EMAIL: </label> | |
| <input type="text" class="form-control" name="email" id="email" size="50"/> | |
| <br/> | |
| <label for="situs" class="labelfrm">ALAMAT SITUS: </label> | |
| <input type="text" class="form-control" name="situs" id="situs" size="50"/> | |
| <br/> | |
| <label for="password" class="labelfrm">PASSWORD: </label> | |
| <input type = "password" class = "form-control" name = "password" placeholder = "Password" id = "password"/> | |
| <br/> | |
| <label for="confirm" class="labelfrm">ULANGI PASSWORD: </label> | |
| <input type = "password" class = "form-control" name = "confirm" placeholder = "Confirm Password" id ="confirm"/> | |
| <br/> | |
| <button type = "submit" class = "btn btn-primary">Submit</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="validation.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery.validator.addMethod("noSpace", function(value, element) { | |
| return value == '' || value.trim().length != 0; | |
| }, "No space please and don't leave it empty"); | |
| jQuery.validator.addMethod("customEmail", function(value, element) { | |
| return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value ); | |
| }, "Please enter valid email address!"); | |
| $.validator.addMethod( | |
| "indonesianDate", | |
| function(value, element) { | |
| // put your own logic here, this is just a (crappy) example | |
| return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); | |
| }, | |
| "Please enter a date in the format DD/MM/YYYY" | |
| ); | |
| var $registrationForm = $('#registration'); | |
| if($registrationForm.length){ | |
| $registrationForm.validate({ | |
| rules:{ | |
| //username is the name of the textbox | |
| nama: { | |
| required: true, | |
| }, | |
| email: { | |
| required: true, | |
| customEmail: true | |
| }, | |
| password: { | |
| required: true | |
| }, | |
| confirm: { | |
| required: true, | |
| equalTo: '#password' | |
| }, | |
| alamat: { | |
| required: true | |
| }, | |
| nim : { | |
| digits: true, | |
| minlength:10, | |
| maxlength:10 | |
| }, | |
| tgl: { | |
| indonesianDate:true | |
| }, | |
| umur: { | |
| digits: true, | |
| range: [0, 100] | |
| }, | |
| situs: { | |
| url: true | |
| }, | |
| }, | |
| messages:{ | |
| nim: { | |
| required: "Kolom nim harus diisi", | |
| minlength: "Kolom nim harus terdiri dari 10 digit", | |
| maxlength: "Kolom nim harus terdiri dari 10 digit" | |
| }, | |
| email: { | |
| required: "Alamat email harus diisi", | |
| email: "Format email tidak valid" | |
| }, | |
| password: { | |
| required: 'Please enter password!' | |
| }, | |
| confirm: { | |
| required: 'Please enter confirm password!', | |
| equalTo: 'Please enter same password!' | |
| }, | |
| }, | |
| errorPlacement: function(error, element) | |
| { | |
| error.insertAfter( element ); | |
| } | |
| }); | |
| } |
Comments
Post a Comment