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:


Prabhu Balakrishnan

Mr. Balakrishnan is a leading expert in Global citizenship and residency programs for high net worth immigrant investor clients. He is also entrepreneur with background in Computer science engineering. His other interests are Linux servers, Machine learning, Parallel computing, Computer vision, Wordpress, etc. He is born in India currently living in Budapest, Hungary.

  • 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

  • http://zoraq.com ???

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

  • http://zoraq.com web design

    Usuful Codes !

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

  • http://zoraq.com ???

    Worked it out nice, thanks for sharing!!

  • http://www.ideatrading.ir ???? ??? ??? ????

    Your website is great and thank for your Articles.

  • http://www.thedoggroomingequipment.com Dog Grooming

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

    • http://www.best-php-scripts.com Prabhu Balakrishnan

      Thank you for the tutorial! Awesome

  • 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!!!!

    • http://platinumclubsofamerica.com Mike Fuller

      Your action needs the processor script link, i.e. myFormProcessor.php or whatever. More info at w3schools: HTML Forms and Input

  • Fawwad

    Nice work!Excellent yeh

  • http://footballiran1.mihanblog.com/ ?????? ?????

    Worked it out nice, thanks for sharing!!

  • http://www.idokits.com mTrang

    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!!

  • http://VESRANA NAVEN

    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

  • https://www.rebelmouse.com/marlanezrsbmvit/everything-that-you-should-kno-689528897.html Gabriel Harrison

    Exceptionally fascinating short article