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

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

3 thoughts on “Form Validation Using jQuery Validation Plugin

Leave a Reply

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