Cara Menggunakan Jquery Validation dengan Bootstrap 4 untuk Validasi Form Input [docs/kuhomi.id].

Teknologi
Selasa, 03 Januari 2023 | 21:17:15
Kuhomi.id

Cara Menggunakan Jquery Validation dengan Bootstrap 4

Pada artikel sebelumnya yang ini Cara Menggunakan Jquery Validation untuk Validasi Form Input, gua pernah membagikan cara menggunakan jquery validation untuk validasi form input. Nah, supaya tampilan nya lebih rapih dan responsive, pada artikel ini kita akan mencoba menerapkan bootstrap 4 pada jquery validation.

Oke, langsung aja berikut kodingannya

1. Load script dan css yang dibutuhkan terlebih dahulu pada tag header

<head>
 <title>Tutorial Pakai Jquery Validation dengan Bootstrap 4</title>

 <!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
 <!-- load script package jquery -->
 <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>

 <!-- load jquery validation -->
 <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>

 <!-- load script package bootstrap.js -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>

2. Buat form yang mau di validasi. Form ini hanya sebagai contoh ya. Nanti harus disesuaikan lagi dengan form yang ingin dibuat

<form id="form">
 <div class="form-group">
  <label for="fullname">Nama Lengkap</label>
  <input type="text" class="form-control" name="fullname" id="fullname" placeholder="Ketikkan Nama Lengkap">
 </div>
 <div class="form-group">
  <label for="email">Email</label>
   <input type="email" class="form-control" name="email" id="email" placeholder="Ketikkan Email Anda">
  </div>
  <div class="form-group">
   <label for="fullname">Kontak</label>
   <input type="text" class="form-control" name="kontak" id="kontak" placeholder="Ketikkan Kontak Anda">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. Selanjutnya, kita buat script jquery untuk proses validasi form.

<script>
 $(document).ready(function(){
  //#form adalah nama id form-nya
  $("#form").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 berupa angka
      kontak: { required: true,
                number: true
              },
      //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: {
                required: "Kontak Harus diisi",
                number: "Kontak hanya boleh diisi dengan angka"
              },
      email: {
                required: "Email Harus diisi",
                email: "Format Email Tidak Valid"
             }
    },
    //element errornya berupa div
    errorElement: "div",
    errorPlacement: function ( error, element ) {
                    // Menyisipkan class invalid-feedback di element error
                    error.addClass( "invalid-feedback" );

                    if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.parent( "label" ) );
                    } else {
                        error.insertAfter( element );
                    }
    },
    //menyisipkan class is-invalid pada element form yang valuenya error
    highlight: function ( element, errorClass, validClass ) {
                    $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
    },
    //menyisipkan class is-valid pada element form yang valuenya sudah benar
    unhighlight: function (element, errorClass, validClass) {
                    $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
    }
  });
 });
</script>

4. Dan ini adalah full code nya

<!DOCTYPE html>
<html>
 <head>
  <title>Tutorial Pakai Jquery Validation dengan Bootstrap 4</title>

  <!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <!-- load script package jquery -->
  <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>

  <!-- load jquery validation -->
  <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>

  <!-- load script package bootstrap.js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
  </head>
  <body>
   <div class="container">
    <div class="row">
     <div class="col-sm-12">
      <form id="form">
       <div class="form-group">
        <label for="fullname">Nama Lengkap</label>
        <input type="text" class="form-control" name="fullname" id="fullname" placeholder="Ketikkan Nama Lengkap">
       </div>
       <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" name="email" id="email" placeholder="Ketikkan Email Anda">
       </div>
       <div class="form-group">
        <label for="fullname">Kontak</label>
        <input type="text" class="form-control" name="kontak" id="kontak" placeholder="Ketikkan Kontak Anda">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
     </form>         
    </div>   
   </div>
  </div>
        
  <script>
    $(document).ready(function(){
      //#register adalah nama id form-nya
      $("#form").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 berupa angka
               kontak: { 
                         required: true,
                         number: true
                       },
               //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: {
                           required: "Kontak Harus diisi",
                           number: "Kontak hanya boleh diisi dengan angka"
                         },
                 email: {
                           required: "Email Harus diisi",
                           email: "Format Email Tidak Valid"
                        }
       },
       errorElement: "div",
       errorPlacement: function ( error, element ) {
              // Menyisipkan class invalid-feedback di element error
              error.addClass( "invalid-feedback" );
              if ( element.prop( "type" ) === "checkbox" ) {
                   error.insertAfter( element.parent( "label" ) );
              } else {
                   error.insertAfter( element );
              }
        },
        //menyisipkan class is-invalid pada element form yang valuenya error
        highlight: function ( element, errorClass, validClass ) {
                    $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
        },
        //menyisipkan class is-valid pada element form yang valuenya sudah benar
        unhighlight: function (element, errorClass, validClass) {
                    $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
        }
       });
      });
  </script>
 </body>
</html>

Nah, jika kita coba running di browser, kurang lebih hasil nya seperti. Terlihat lebih rapih dibandingkan jika tanpa menggunakan bootstrap. Semoga bermanfaat ya

kuhomi.id