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.

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

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

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.

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.

Facebook Comments
 

Agung Setiawan

Halo, perkenalkan saya Agung Setiawan. Seorang software developer, penulis buku, blogger, gunpla builder, tech educator dan yang paling penting console gamer.

 
Halo, perkenalkan saya Agung Setiawan.
Seorang software developer, penulis buku, blogger, gunpla builder, tech educator dan yang paling penting console gamer.
Selain di blog ini saya cukp aktif juga main di Twitter @agungsetiawanmu dan Facebook serta Instagram.
Mau belajar programming bareng? Cek YouTube channel saya.
Mau belajar Vim bareng saya?

3 thoughts on “Form Validation Using jQuery Validation Plugin

Leave a Reply

Your email address will not be published. Required fields are marked *