Form validation memiliki fungsi untuk memvalidasi data sebelum masuk ke dalam proses selanjutnya. Sebagai contoh, dalam form pendaftaran seseorang wajib mengisi nama mereka atau bisa juga terdapat isian yang memiliki kriteria tertentu seperti jumlah abjad tidak boleh lebih dari 10 karakter, dan lain sebagainya. Pada kesempatan ini saya akan memberikan validasi form html sederhana dari sisi client dengan menggunakan jquery.

Fungsi yang saya buat sangatlah sederhana, yakni cukup dengan menambahkan class pada elemen field pada html yang Anda miliki. Tidak peduli Anda menggunakan bootstrap atau tidak, fungsi ini tetap bisa berjalan selama anda memasang jquery. Apabila website Anda belum memiliki jquery, silahkan bisa kunjungi situs resminya di sini https://jquery.com/download/. Anda bisa juga menggunakan cdn, hanya dengan mengcopy script ini di antara head maupun footer pada html anda.

• Declare jquery plugin

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

• Script validasi, saya beri nama idevValidation()

  <script>
       function idevValidation() 
       {
        var collectErrors = []
        var collectSpecialRules = specialRules()
        var intFail = 0
        $('.error-message').remove()

        $.each( $('.idev-validation'), function( key, value ) {  
          var errorMessage = "This field is required"
          $(this).css({"border": "1px solid #428fc7"})
          if(!$(this).val()){
            if($(this).data('special-message')){
              errorMessage = $(this).data('special-message')
            }
            collectErrors[key] = errorMessage  
            intFail ++
          }
        })

        if(collectSpecialRules){
          $.each(collectSpecialRules, function( key, value ) { 
            if(value.id){
              errorMessage = value.message
              var indexSpecialRule = $( ".idev-validation" ).index( $("#"+value.id) )
              if(!collectErrors[indexSpecialRule]){
                collectErrors[indexSpecialRule] = errorMessage 
                intFail ++
              }
            }
          })
        }

        $.each(collectErrors, function( key, value ) { 
          var currentIndexClass = ".idev-validation:eq("+(key)+")"
          if(value)
          {
            $(currentIndexClass).css({"border": "1px solid #c74266"})
            $("<p class='error-message' style='color:#c74266; font-size:12px;'>"+value+"</p>").insertBefore(currentIndexClass)
          }else{
            $("<p class='error-message' style='color:#c74266; font-size:12px;'>&nbsp;</p>").insertBefore(currentIndexClass)
          }
        })

        if (intFail == 0) {
          // do what you want
        }
       }

       function specialRules() 
       {
         var responses = []
         if(!$('#email').val().includes("@")){
           responses.push({
             id:'email',
             message:'Email Harus mengandung @'
           })
         }
         if(!$("#cekbok:checked").val()){
           responses.push({
             id:'cekbok',
             message:'Cekboc Harus diisi'
           })
         }
         return responses
       }
     </script>

Secara default fungsi di atas hanya memvalidasi kosong atau tidak nya suatu field. Apabila ingin melakukan validasi lanjutan seperti email harus mengandung karakter @. Anda bisa menggunakan specialRules(), dengan cara menambah logika if serta menyesuaikan id maupun class yang dituju. Saya sarankan dalam hal ini Anda menggunakan id. Kemudian di bagian response sesuaikan id yang dipush dengan id field Anda.

Script di atas kurang optimal apabila dipakai pada select, checkbox, radio. Sebaiknya Anda menambahkannya di speciaRules() seperti yang saya contohkan. Contoh field htmlnya sebagai berikut:

<form action="#" method="post" class="contact-form" data-aos="fade-up" data-aos-delay="300" role="form">
    <div class="row">
      <div class="col-lg-6 col-12">
        <input type="text" class="form-control idev-validation" name="name" placeholder="Name">
      </div>

      <div class="col-lg-6 col-12">
        <input type="email" id="email" class="form-control idev-validation" data-special-message='bro iki email diisi' name="email" placeholder="Email">
      </div>

      <div class="col-lg-12 col-12">
        <textarea class="form-control idev-validation" rows="6" name="message" placeholder="Message"></textarea>
      </div>
      <div class="col-lg-12 col-12">
        <select class="idev-validation">
          <option value="">Pilih</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>

      <div class="col-lg-12 col-12">
        <input type="checkbox" id="cekbok" class="idev-validation">
      </div>
      <div class="col-lg-12 col-12">
        <input type="radio" class="idev-validation">
      </div>
      <div class="col-lg-5 mx-auto col-7">
        <button type="button" onclick="idevValidation()" class="form-control" id="submit-button" name="submit">Send Message</button>
      </div>
    </div>
  </form>

Pastikan juga untuk button memiliki type="button" bukan submit, kemudian pada bagian onclick diarahkan ke fungsi idevValidation(). Di dalam function idevValidation() terdapat comment "do what yo want". Ini sengaja saya kosongkan supaya Anda bisa melakukan aksi lanjutan setelah semua validasi terlewati, seperti submit POST via ajax. Saya coba rangkum kembali cara penggunaan fungsi di atas:

1. Pasang jquery, Anda bisa mendownloadnya terlebih dahulu atau via cdn dan lampirkan di footer atau header
2. Pasang fungsi idevValidation() serta specialRules() pastikan fungsi ini terletak di bawah jquery yg Anda lampirkan
3. Buatlah field inputan dengan class="idev-validation"
4. Set Button dengan type="button" dan onclick="idevValidation()"
5. Apabila Anda tidak membutuhkan fungsi specialRules(), bisa diset seperti di bawah ini:

function specialRules() 
{
    var responses = []
    return responses
}

Saya akan membahas kode di atas pada kesempatan lain.

Selamat mencoba.