Form Validation Using jQuery Validation Plugin

validation FI

Jquery Validation is a powerful jQuery plugin to perform form validation in client side. Why we choose client side validation?, because this approach is more lightweight since no request is sent to the server. We need 2 JavaScript files to make jquery validation, first the core of jquery and the second is the plugin it self.

<body>
  <form id="formMahasiswa" method="post">	
 	<table>
         <tr>
       	  <td>Nama</td>
       	  <td><input type="text" name="nama" id="nama" class="required"/></td>
       	  <td><label for="nama" class="error"></label></td>
         </tr>
         <tr>
       	  <td>Nim</td>
       	  <td><input type="text" name="nim" id="nim" class="required" /></td>
       	  <td><label for="nim" class="error"></label></td>
         </tr>
         <tr>
       	  <td>Alamat</td>
       	  <td><input type="text" name="alamat" id="alamat" class="required" /></td>
       	  <td><label for="alamat" class="error"></label></td>
         </tr>
         <tr>
       	  <td>Agama</td>
       	  <td><input type="text" name="agama" id="agama" class="required" /></td>
       	  <td><label for="agama" class="error"></label></td>
         </tr>
         <tr>
       	  <td>Jenis Kelamin</td>
       	  <td><input type="radio" name="jenis_kelamin" id="jenis_kelamin" value="Laki-Laki" class="required" />Laki-Laki
              <input type="radio" name="jenis_kelamin" id="jenis_kelamin" value="Perempuan" class="required" />Perempuan
       	  </td>
       	  <td><label for="jenis_kelamin" class="error"></label></td>
         </tr>
         <tr>
         	<td></td>
         	<td><input type="submit" value="Submit"/></td>
         </tr>
 	</table>
   </form>
 </body>

Note at line 6 and 7. We add class=”required” to every input that needs to be validated. We also add label refers to input element to show the error message.

here is the script to do validation, simple enough

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

Next, we create css styling to make the error messages colored in red.

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

Now try to submit the form without typing anything in the input elements. Here’s what we get

jQuery Validation

As we can see from image above, the error messages are still in default format. We can customize by adding title attribute on input elements.

<td><input type="text" name="nama" id="nama" class="required" title="Nama Harus Diisi"/></td>

validasi custom

Jquery Validation plugin can be used for all types of inputs such as checkboxes, text areas, select and others. We can also perform more complex validation like input must have 5-10 characters long, must be email, must be a Url and etc.

Advertisements

8 thoughts on “Form Validation Using jQuery Validation Plugin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s