Hi everybody. Sometimes you may find yourself working on projects that require some intelligent form field validation..but what’s the easiest way to achieve this? I’ve used everything from the popular Validate plugin to Spry components, but I found all of them a little too much to achieve something so simple. In this post I’m going to show you how to add sleek form validation to your input fields in just two easy steps.

First you’ll need to download my tutorial pack for this post. It’s composed of a small jQuery Plugin we’ll be using for this tutorial which you can include with jQuery as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validation.js"></script>

Lets take a look at the HTML.

HTML >> demo.html

To keep things simple our jQuery Plugin uses a template structure for each input field you would like to validate. For this post, I’m going to use the "username" field as an example of how to use it.

1. Here is our input field template you can use for anything like usernames, passwords, addresses and so forth. Notice that we have an image area to display a notification icon and a message area to display any validation messages.

         <li class="validated" id="FIELDNAME_li">
                  <label for="r_FIELDNAME">Fieldname:</label>
                  <div id="FIELDNAME_img"></div>
                  <input class="validated" name="FIELDNAME" id="FIELDNAME" type="text" maxlength="20" value=""  />
                  <div id="FIELDNAME_msg"></div>
          </li>

Lets now replace FIELDNAME with username to setup an input field that validates.

          <li class="validated" id="username_li">
                  <label for="r_username">Username:</label>
                  <div id="username_img"></div>
                  <input class="validated" name="username" id="username" type="text" maxlength="20" value=""  />
                  <div id="username_msg"></div>
          </li>

2.  The next stage of setting up a new text field for validation is adding our "username" field to our JavaScript. This takes the form of a check to see if the name of one of the input fields on the page is "username" and if so, what type of validation we would like to apply on it.

JavaScript >> Validator.js

$.fn.validate = {
        init: function(o) {
          //Here’s where I’m checking for my input field name
          if(o.name == ‘username’) { this.username(o) }; 
          if(o.name == ‘password’) { this.password(o) };
          if(o.name == ‘email’) { this.email(o) };
          if(o.name == ‘dob’) { this.dob(o) };
        },
       

//and here’s where I’m definining a validation method for it
//note the regex used to make sure that our username fits the
//expected pattern

        username: function(o) {
          var user = /[(\*\(\)\[\]\+\.\,\/\?\:\;\’\"\`\~\\#\$\%\^\&\<\>)+]/;
           if (!o.value.match(user)) {
             doValidate(o);
            } else {
             doError(o,’no special characters allowed’);
            };
        } 
       

(each of the password, email, date-of-birth items also have their own custom validation scheme which you can see in the tutorial pack)

And that’s it!. You can define as many input fields as you would like and validate their content using any type of regular expression that your project requires the data to conform to.

If you would like to try the methods described in this post out for your own project, feel free to download my tutorial pack here or view a demo here.

Related posts:

1. How to Add Facebook Connect To Your Website in just 3 Steps     Many Social Networking sites allow users to authenticate...
2. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...
3. How to add a password strength meter using jQuery in under 5 minutes Hi guys. Today I’m going to show you how...
4. 7 Really Useful Tips For Better jQuery Code   I’ve been using jQuery in my web apps for...
5. The Missing Date-Time Selector for jQuery UI Today I began work on a new UI for...

Related posts brought to you by Yet Another Related Posts Plugin.