Cara Menggunakan Plugin Jquery form validation dan langkahnya

Banyak sekali plugin Jquery digunakan untuk mendukung tampilan website lebih menarik dan interaktif, dari membuat slider, animasi, form validation. Pada kesempatan kali ini saya akan memberikan tips dan trik bagaimana Cara menggunakan plugin Jquery form validation, dimana plugin ini biasa digunakan untuk validation untuk form input. Latihan kali ini kita akan membuat sebuah form sederhana dan kemudian kita akan memanggil plugin yang sudah saya sediakan. Teman-teman bisa ikuti langkah-langkah di bawah ini, berikut ini adalah demo gambar yang nanti kita akan buat.

Seperti yang kalian lihat pada gambar di atas ini, jika form tidak di isi dan di klik submit maka akan keluar validation text yang berwarna hijau. Baik, sekarang kita akan praktekkan Cara Menggunakan Plugin Jquery form validation. Seperti biasa teman-teman siapkan text editor nya dan copy script html nya di bawah ini

<html>
 <head>
    <title>Cara Menggunakan Plugin Jquery form validation</title>
 </head>
 <body>
  <form id="formMahasiswa" method="post">    
     <table>
         <tr>
             <td>Nama</td>
             <td><input type="text" name="nama" id="nama" class="required"/></td>
         </tr>

         <tr>
             <td>Alamat</td>
             <td><input type="text" name="Alamat" id="Alamat" class="required" /></td>
         </tr>

         <tr>
             <td>Telephone</td>
             <td><input type="text" name="Telephone" id="Telephone" class="required" /></td>
         </tr>

         <tr>
             <td>Email</td>
             <td><input type="email" name="Email" id="Email" class="required" /></td>
         </tr>

         <tr>
             <td>Pesan</td>
             <td><textarea name="Pesan" id="Pesan"  class="required" ></textarea></td>
         </tr>

         <tr>
             <td></td>
             <td><input type="submit" value="Submit"/></td>
         </tr>
     </table>
   </form>
 </body>
</html>

Dan pastekan pada text editornya, kemudian jalankan pada browsernya. Maka hasil nya seperti gambar di bawah ini

Berikutnya kita akan memanggil plugin Jquery nya, teman-teman bisa download disini. Jika sudah di download extract file dan panggil di dalam tag head nya

Jika sudah, tambah kan fungsi Jquery nya untuk memanggil id=”formMahasiswa”

<script type="text/javascript">
       $(document).ready(function(){
          $("#formMahasiswa").validate();
       });
    </script>

Berikutnya kita buat text untuk menampilkan validationnya, teman-teman tambahkan title=”” di dalam tag input, bisa lihat gambar di bawah ini

Teman-teman tambahkan title kedalam tag input seperti gambar di atas ini, text ini yang nanti akan muncul pada browser. Langkah berikutnya kita berikan tag <label> atau <span> untuk menampung text yang kita berikan pada title pada tag input, kemudian kita hubungkan antara tag input dan <labe> / <span> dengan cara memanggil id pada masing-masing tag input yaitu dengan memberikan for pada label dan samakan nama yang ada pada id dengan for, teman-teman bisa klik gambar di bawah ini untuk melihat penambahan script yang harus di tambahkan.

Seperti yang saya berikan kotak berwarna orange yang harus teman-teman tambahkan, dan saya beri kotak warna biru untuk menyamakan antara id dan for teman-taman juga samakan. Yang terakhir kita berikan css nya di dalam tag head

<style type="text/css">
     .error{
     	color: green;
     }
    </style>

Jika sudah, save dan refresh pada browsernya kemudian klik submit. Maka validation akan muncul, lalu input kan pada form. Dan validation akan hilang jika form input di isikan text, mudah sekali bukan. Oke sekian dulu pada artikel kali ini tentang Cara Menggunakan Plugin Jquery form validation, Kita jumpa lagi pada tutorial dumet school berikutnya, terimakasih dan sampai jumpa.

Semoga bermanfaat 🙂

Cara Menggunakan Plugin Jquery form validation

Kategori