SISTEM INFORMASI: Validasi Responsive

Berikut ini step by step membuat validasi form dengan JQuery Validation.

#1. Siapkan form inputan yang akan divalidasi

Sebagai contoh form inputan sederhana, buatlah dengan HTML form berikut ini:

Contoh Form Inputan Data Mahasiswa

Untuk membuat form inputan diatas, berikut ini script HTML-nya. Ketik dan simpan dalam file berekstensi .html. Action dari form arahkan ke halaman proses.php.

Code block



<html>


 <head>


  <title>Validasi Form dengan JQuery Validation - Achmatim.Net</title>


  <style type="text/css">


  .labelfrm {


   display:block;


   font-size:small;


   margin-top:5px;


  } .error { font-size:small; color:red; }


  </style>


 </head>


 <body>


  <h1>Input Data Mahasiswa</h1>


  <form action="proses.php" method="post" id="frm-mhs">


   <label for="nim" class="labelfrm">NIM: </label>


   <input type="text" name="nim" id="nim" maxlength="10" size="15"/>


 


   <label for="nama" class="labelfrm">NAMA: </label>


   <input type="text" name="nama" id="nama" size="30"/>


 


   <label for="alamat" class="labelfrm">ALAMAT: </label>


   <textarea name="alamat" id="alamat" cols="40" rows="4"></textarea>


 


   <label for="tgl" class="labelfrm">TANGGAL LAHIR: </label>


   <input type="text" name="tgl" id="tgl" maxlength="10" size="15"/>


 


   <label for="umur" class="labelfrm">UMUR: </label>


   <input type="text" name="umur" id="umur" maxlength="3" size="7"/>


 


   <label for="email" class="labelfrm">ALAMAT EMAIL: </label>


   <input type="text" name="email" id="email" size="50"/>


 


   <label for="situs" class="labelfrm">ALAMAT SITUS: </label>


   <input type="text" name="situs" id="situs" size="50"/>


 


   <label for="pass1" class="labelfrm">PASSWORD: </label>


   <input type="password" name="pass1" id="pass1" size="15"/>


 


   <label for="pass2" class="labelfrm">ULANGI PASSWORD: </label>


   <input type="password" name="pass2" id="pass2" size="15"/>


 


   <label for="submit" class="labelfrm">&nbsp;</label>


   <input type="submit" name="Submit" value="Submit"/>


  </form>


 </body>


</html>

#2. Sertakan library JQuery dan Plugin JQuery Validation

Library yang diperlukan ada 2 (dua) yaitu library core JQuery yang dapat didownload di situs http://code.jquery.com dan plugin JQuery Validation yang dapat didownload dari situs resminya di http://bassistance.de/jquery-plugins/jquery-plugin-validation/. Untuk menyertakan library tersebut ke dalam form yang sudah kita buat sebelumnya, tambahkan dua baris perintah berikut ini di antara tag <head> (diasumsikan bahwa kedua plugin tersimpan di folder /jquery).

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.js"></script>

#3. Tentukan aturan / rule validasi

Selanjutnya yang harus dilakukan adalah membuat aturan atau rule validasi. Hal ini penting untuk dilakukan sebelum menerapkan aturan tersebut ke dalam suatu form. Berikut ini beberapa contoh aturan yang akan saya terapkan terhadap form di atas:

Semua field inputan yang harus diisi (required)
Inputan NIM hanya boleh diisi 10 digit angka (tidak boleh diisi huruf)
Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
Inputan UMUR diisi dengan angka antara 0-100
Inputan ALAMAT EMAIL diisi dengan format penulisan email.
Inputan ALAMAT SITUS diisi dengan format penulisan situs.
Inputan PASSWORD dan ULANGI PASSWORD harus sama.

#4. Terapkan aturan / rule validasi

Untuk menerapkan aturan / rules validasi yang telah kita tentukan, panggil fungsi validate() saat halaman pertama kali dimunculkan. Di dalam fungsi validate() kita dapat membuat aturan-aturan di atas. Sebagai langkah awal, tambahkan potongan script berikut ini di antara tag <head>

Code block



<script type="text/javascript">


$(document).ready(function() {


 $('#frm-mhs').validate();


});


</script>

Perhatikan potongan script di atas. Fungsi validate() harus diterapkan pada form, kita dapat menggunakan selector ID seperti pada script di atas. #frm-mhs merupakan ID dari form inputan yang sudah dibuat sebelumnya.
Selanjutnya kita akan menerapkan aturan validasi satu per satu.

Aturan 1: Semua field inputan yang harus diisi (required)

Untuk menerapkan aturan suatu inputan yang harus diisi (required), cara paling gampang adalah dengan menambahkan class “required” pada setiap inputan yang akan dikenakan aturan tersebut. Contohnya pada field NIM sebagai berikut.

<input type="text" name="nim" id="nim" maxlength="10" size="15" class="required"/>

Lakukan hal yang sama untuk semua tag inputan.

Aturan 2: Inputan NIM hanya boleh diisi 10 digit angka (tidak boleh diisi huruf)

Untuk aturan yang kedua ini, dapat dirinci menjadi 3 rule yaitu tidak boleh huruf (digits), panjang minimal isian adalah 10 digit dan panjang maksimal juga 10 digit. Kita dapat menambahkan rule pada pemanggilan fungsi validate() sehingga berubah menjadi sebagai berikut:

Code block



$('#frm-mhs').validate({


 rules: {


  nim : {


   digits: true,


   minlength:10,


   maxlength:10


  }


 }


});

Aturan 3: Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY

Untuk aturan yang ketiga yaitu mengenai format inputan tanggal lahir. Kita dapat menggunakan rule bawaan date:true jika format yang diinginkan adalah MM/DD/YYYY atau YYYY-MM-DD. Namun dalam rule diatas, diinginkan format tanggalnya adalah DD/MM/YYYY sehingga kita perlu membuat fungsi validator sendiri.

Perhatikan fungsi indonesianDate() beserta penerapannya berikut ini:

Code block



$(document).ready(function() {


 $('#frm-mhs').validate({


  rules: {


   nim : {


    digits: true,


    minlength:10,


    maxlength:10


   },


   tgl: {


    indonesianDate:true


   }


  }


 });


});


 


$.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"


);

referensi fungsi: stackeoverflow.

Aturan 4: Inputan UMUR diisi dengan angka antara 0-100

Untuk aturan ke-4, kita dapat menggunakan fungsi bawaan range serta batasan inputan berupa angka (digits). Jadi, tambahkan rule untuk inputan umur.

Code block



umur: {


 digits: true,


 range: [0, 100]


}

Aturan 5: Inputan ALAMAT EMAIL diisi dengan format penulisan email.

Untuk aturan yang ke-5, JQuery validation sudah menyediakan fungsi email. Dapat ditambahkan langsung di tag inputannya (seperti aturan 1), atau ditambahkan rule email: true.

Aturan 6: Inputan ALAMAT SITUS diisi dengan format penulisan situs.

Untuk aturan ke-6 juga sudah tersedia fungsinya, yaitu url, dan dapat ditambahkan di tag inputan atau rule tersendiri.

Aturan 7: Inputan PASSWORD dan ULANGI PASSWORD harus sama.

Aturan yang terakhir terkait dengan validasi bahwa password harus sama antara 2 field inputan. Untuk hal tersebut, sudah tersedia fungsi equalsTo. Rule validasi setelah ditambahkan aturan 4, 5, 6 dan 7 adalah sbb:

Code block



$('#frm-mhs').validate({


 rules: {


  nim : {


   digits: true,


   minlength:10,


   maxlength:10


  },


  tgl: {


   indonesianDate:true


  },


  umur: {


   digits: true,


   range: [0, 100]


  },


  email: {


   email: true


  },


  situs: {


   url: true


  },


  pass2: {


   equalTo: "#pass1"


  }


 }


});

Mengganti Pesan Kesalahan

Salah satu kelebihan plugin JQuery Validation adalah kita dapat dengan mudah mengganti pesan kesalahan yang akan ditampilkan jika aturan validasi tidak terpenuhi. Defaultnya pesan kesalahan dalam bahasa inggris, kita dapat menggantinya dengan mudah dengan menambahkan method messages. Berikut ini contohnya:

Code block



$('#frm-mhs').validate({


 rules: {


  nim : {


   digits: true,


   minlength:10,


   maxlength:10


  },


  tgl: {


   indonesianDate:true


  },


  umur: {


   digits: true,


   range: [0, 100]


  },


  email: {


   email: true


  },


  situs: {


   url: true


  },


  pass2: {


   equalTo: "#pass1"


  }


 },


 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"


  },


  pass2: {


   equalTo: "Password tidak sama"


  }


 }


});

Form Inputan yang Sudah Ditambahkan Validasi

SISTEM INFORMASI

Sabtu, 02 April 2016

Validasi Responsive

#1. Siapkan form inputan yang akan divalidasi

#2. Sertakan library JQuery dan Plugin JQuery Validation

#3. Tentukan aturan / rule validasi

#4. Terapkan aturan / rule validasi

Aturan 1: Semua field inputan yang harus diisi (required)

Aturan 2: Inputan NIM hanya boleh diisi 10 digit angka (tidak boleh diisi huruf)

Aturan 3: Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY

Aturan 4: Inputan UMUR diisi dengan angka antara 0-100

Aturan 5: Inputan ALAMAT EMAIL diisi dengan format penulisan email.

Aturan 6: Inputan ALAMAT SITUS diisi dengan format penulisan situs.

Aturan 7: Inputan PASSWORD dan ULANGI PASSWORD harus sama.

Mengganti Pesan Kesalahan

Tidak ada komentar:

Posting Komentar