Cara Menggunakan Jquery Validation untuk Validasi Form Input

Ketika kita membuat form pada website, terkadang kita memiliki kriteria input sendiri untuk masing-masing field form. Sebagai contoh, jika field form email, maka value yang di-input kan oleh user harus berupa format email. Kemudian, ada field yang tidak boleh dikosongkan oleh user, membatasi jumlah karakter yang dapat di-input oleh user, atau bahkan membatasi format string atau karakter yang dapat di-inputkan oleh user.

Maka dari itu, form yang telah disubmit oleh user harus kita pastikan terlebih dahulu bahwa value yang di-inputkan oleh user sudah sesuai dengan kriteria yang diinginkan. Metode tersebut biasa disebut form validation. Pada pemrograman web sendiri, ada beberapa cara untuk menerapkan form validation. Baik itu dari sisi server side atau client side.

Pada artikel ini, gua akan sharing sedikit cara menggunakan form validation dari sisi client side, yaitu menggunakan jquery validation. Oke, langsung aja ini kodingannya

1. Load script jquery dan jquery validation di dalam tag head

<head>
 <title>Tutorial Pakai Jquery Validation</title>
 <!-- load script package jquery validation -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

2 Buat form yang mau di validasi.

<body>
 <form action="" id="register" method="post">   
  <label for="fullname">Nama Lengkap</label>
  <input type="text" name="fullname" id="id-fullname">
  </br>
  <label for="jk">Kontak</label>
  <input type="text" name="kontak" id="id-kontak">
  </br>
  <label for="email">Email</label>
  <input type="text" name="email" id="id-email">
  </br>
  <button class="submit" type="submit">Daftar</button>
 </form>
</body>

3. Selanjutnya, buat script jquery untuk proses validasi. Berikut script untuk validasi form beserta komentar penjelasan perbaris kode

<script>
 $(document).ready(function(){
  //#register adalah nama id form-nya
  $("#register").validate({
   ignore: [],
   //deklarasikan rules yang ingin di validasi
   //untuk rules selengkapnya bisa dicek di dokumentasi jquery validation ya
   rules: {
    //artinya field dengan attr name=fullname wajib diisi
    fullname: "required",
    //artinya field dengan attr name=kontak wajib diisi
    kontak: "required",
    //artinya field dengan attr name=email wajib diisi
    //dan harus sesuai dengan format email pada umumnya
    email: {
     required: true,
     email: true
    }
   },
   //deklarasi pesan atau alert yang muncul pas value pada field form tidak sesuai rules
   messages:{
    fullname: "Nama Lengkap Harus diisi",
    kontak: "Kontak Pribadi Harus diisi",
    email: {
     required: "Email Harus diisi",
     email: "Format Email Tidak Valid"
    }
   }
  });
 });
</script>

Nah, berikut untuk full kodingannya

<!DOCTYPE html>
<html>
 <head>
  <title>Tutorial Pakai Jquery Validation</title>
  <!-- load script package jquery validation -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body>
  <form action="" id="register" method="post">   
   <label for="fullname">Nama Lengkap</label>
   <input type="text" name="fullname" id="id-fullname">
   </br>
   <label for="jk">Kontak</label>
   <input type="text" name="kontak" id="id-kontak">
   </br>
   <label for="email">Email</label>
   <input type="text" name="email" id="id-email">
   </br>
   <button class="submit" type="submit">Daftar</button>
  </form>
 </body>
 <script>
 $(document).ready(function(){
  //#register adalah nama id form-nya
  $("#register").validate({
   ignore: [],
   //deklarasikan rules yang ingin di validasi
   //untuk rules selengkapnya bisa dicek di dokumentasi jquery validation ya
   rules: {
    //artinya field dengan attr name=fullname wajib diisi
    fullname: "required",
    //artinya field dengan attr name=kontak wajib diisi
    kontak: "required",
    //artinya field dengan attr name=email wajib diisi
    //dan harus sesuai dengan format email pada umumnya
    email: {
     required: true,
     email: true
    }
   },
   //deklarasi pesan atau alert yang muncul pas value pada field form tidak sesuai rules
   messages:{
    fullname: "Nama Lengkap Harus diisi",
    kontak: "Kontak Pribadi Harus diisi",
    email: {
     required: "Email Harus diisi",
     email: "Format Email Tidak Valid"
    }
   }
  });
 });
 </script>
</html>

untuk preview nya kurang lebih seperti ini

kuhomi.id

Pada artikel ini, hanya memberikan contoh validasi form input untuk required field dan email field. Sebenarnya masih banyak lagi parameter validasi yang bisa digunakan dengan jquery validation ini. Untuk dokumentasi lengkapnya, silahkan cek di link ini Dokumentasi Jquery Validation.

Preview ini juga masih belum menggunakan style css ataupun bootstrap. Jika ingin tampilan yang lebih menarik, bisa kita gunakan styling dengan css atau bootstrap. Oke, sekian artikel mengenai jquery validation. Semoga bermanfaat