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

registerdemo2.PNG

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>
<script>
$(document).ready(function(){
    $("#registerForm").validate();
  });
</script>
</head>

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

registererror.PNG

Advanced Validation

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

To check password and password retype are same

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

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

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

          </tr>

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.

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

    $("#regForm").validate();
  });
  </script>

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

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

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

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

    $("#regForm").validate();
  });
  </script>

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

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

Enjoy jQuery!

Similar Posts:

Tags:

Prabhu Balakrishnan

I am cool and friendly chap blogging since 2005. My interests are wordpress, PHP, linux servers, SEO and travel. Besides computers, i am crazy for video games, travel and a cup of hot coffee! I am born in India, but currently living in Budapest, Hungary. Feel free to contact me folks!

Leave a Reply

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


× five = 45

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source codes with [code][/code] tags. Powered by
  1. 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?

    Reply
  2. 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!!!!

    Reply
  3. 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?

    Reply
  4. 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!

    Reply
  5. 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 ….
    thanx

    Reply
  6. aru

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

    thanks

    Reply
1 2 3