Quick & Easy Form Validation Tutorial with JQuery

Form validation has become never been easy like before. If you havent heard of jQuery, then its time to get know now. Jquery is an open source set of javascript library, that brings user interactivity in web applications so easy even for a beginner with just few lines of code.

In this tutorial, i am going to show how easy to validate a form with jquery. For this you will need to download the following:

JQuery Libraryhttp://jquery.com
JQuery form validation pluginhttp://bassistance.de/jquery-plugins/jquery-plugin-validation/

Lets say we are going to validate a registration form like shown below..


Step 1:

Place the javascript files within the head section

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

You should set the name and id of your html form same as $(“#registerForm”).validate();

Step 2:

For each required form element just place class=”required” and specify minlength tag inside it. For example

Name field -> class=”required”
Email field -> class = “required email”

<input name="name" type="text" id="name" class="required">
<input name="user_id" type="text" id="user_id" minlength="4">
<input name="user_email" type="text" id="user_email" class="required email">

Thats it! you will be able to validate form field textboxes without any advanced code.
For optional fields, you can specify class=”optional” or just leave it.

Step 3

In this last step you will add some styles to the error messages in the stylesheet.

.error {
	font: normal 10px arial;
	padding: 3px;
	margin: 3px;
	background-color: #ffc;
	border: 1px solid #c00;

Thats it! see how the validation works like a charm..


Advanced Validation

The following are some of bit advanced validation code that might help you.

To check password and password retype are same

      <td><input name="pwd" type="text" id="pwd" class="required" minlength="5"></td>
      <td>Retype Password</td>
      <td><input name="pwdc" type="text" id="pwdc" class="required" equalTo="#pwd"></td>

To validate a website URL – optional field
It should check the URL and force the user to enter full url with http.

            <td>Website </td>
            <td><input name="web" type="text" id="web2" class="optional defaultInvalid url">
              <span class="example">http://www.example.com</span></td>


To validate Phone Number

We dont want restrict phone numbers to be US only. Suppose if a foreign person enters a phone with + and dashes, we want that as well. To do this you will need to make slight change inside document.ready() in head section.

    $.validator.addMethod("NumbersOnly", function(value, element) {
        return this.optional(element) || /^[0-9\-\+]+$/i.test(value);
    }, "Phone must contain only numbers, + and -.");


and now you can validate specifying class=”required NumbersOnly”. This will allow only numbers 0-9, hyphen and + for country code.

      <td><input name="phone" type="text" id="phone" class="required NumbersOnly"></td>

Validating Username with no special characters

We dont want username to contain any special characters like dot,slashes etc. We only want to allow alphabets, numbers and underscore.

We create a function similar way like above

    $.validator.addMethod("username", function(value, element) {
        return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
    }, "Username must contain only letters, numbers, or underscore.");


and now you can call using class=”required username”

<td>User ID</td>
<input name="user_name" type="text" id="user_name" class="required username" minlength="4">

Enjoy jQuery!

Similar Posts:


Balakrishnan Prabhu

Mr. Balakrishnan Prabhu is the founder of Corpocrat magazine. He is also the founder of Best Citizenships (BC), assisting wealthy individuals with with global citizenship and residency programs in Europe. His other interests are Linux, Machine learning, Wordpress, etc. You can contact him here

  • codename47

    Nice tutorial!

    I have a question. There is a built-in rule in jQuery named “range”. In your article, we can specify minlength=”5″. But with “range”, it required an array, e.g. [5, 15].

    I have tried the attribute range=”[5, 15]”, but it didn’t work. Is there anyway to specify an array like that in the html attribute?

  • Scott

    The only quick tutorial that’s acually easy to follow and makes implementation and experimentation easy. Thanks!

  • asha

    Great! Thanks for a wonderful example

  • ???

    Quick & Easy Form Validation Tutorial with J Query post for THX.

  • Usuful Codes !

    Every Week I folow your site…..
    I share it in my Face book now….
    Thank You

  • ???

    Worked it out nice, thanks for sharing!!

  • Your website is great and thank for your Articles.

  • Thanks for this tutorial because i need to cleanup some code and can use this tutorial !

  • jewel

    Thnx a lot …for a helpful tutorial for beginner

  • Jake

    I’m a super nooby with coding and I’m stuck on this part right here

    You should set the name and id of your html form same as $(“#registerForm”).validate();

    And this is how I put my html code

    <form id="registerForm" name="registerForm" action="Enter Processor Script" method="post" />

    But it’s not working, i tried putting the # is front of it too but still nothing. I have followed all the other steps to the tee and have gone back and read them like 10 times to double check!!!!

  • Fawwad

    Nice work!Excellent yeh

  • Worked it out nice, thanks for sharing!!

  • when hitting the submit button, it only validates the first form field and ignores the rest. Has anyone else noticed this and/or fixed it?

  • v

    Great Article

  • Javaman59

    Excellent work! Very simple, and I’ve got a beautifully validating form with a few lines of code.

    I got an error at first, “the value of the property ‘$’ is null or undefined”.

    It had something to do with a mismatch between jquery and jquery.validate versions.

    I fixed it by just using the jquery.js in the jquery.validate zip file, and my script tags look like this:

    Where “scripts” is the scripts directory for my project. “lib” and “dist” are in the zip download.

    Thanks! If it weren’t for this problem, I’d have had it going in about 10 minutes!

  • eremiya

    Dude, you rock!!

  • HAI MAN…. i am a dought .. how can i do for drop downs… plz sugggest me man

  • Shenu

    Thanx….very usefull
    but I have a problem..
    when i implementing this in a project its not working .. i dont know why , but its not working.
    might be i have used many .js files thats why or something else ..
    can anyone plz help me out ….

  • ajay

    hi friends how to Validate Dropdownlist,radio and checkbox

    .pls help me..

  • aru

    this plugin is not compatibility to ie-8 browser standard. please give me a solution for internet explorer 8v.


  • Ashish tiwari

    good validation form thanks gor making it.
    it’s nice

  • Exceptionally fascinating short article

  • Your blog is so amazing and helpfull.And it is the great idea .Thanks for sharing a batter idea.Please upload more post in different topics like top 10 horror movies of all time lose weight fast plan, top 10 horror movies of all time etc.