jQuery: Validation

[Brandon W]

G'day everyone.

Welcome to another one of my jQuery tutorials that many people seem to love. This is the fourth tutorial and I will be showing you how to use your
FIRST jQuery plug-in, unless you have done it before. These plug-ins are really easy to find and use thanks to the dedicated people that made them
this way. There is a plug-in for nearly anything you can think of, so I will be showing you how to validate your user inputs the easy way

Let's get started. The name of this plug-in is "Validation", it is one of the oldest plug-ins for jQuery and has been proven to be the best validator.
This should hopefully encourage you to get into using it and don't rely on Server side programming languages as much. I will be showing you how to
make sure a user inputs some data, only enter numbers, valid email and a URL which will be optional.

To use the plug-in you need to download the JS file, attached at the bottom of the post or visit their homepage, also at the bottom. Let's get started
by creating the form, all explained below.

<form type="GET" action="" class="form" id="form">
    <p>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" size="30" class="required" minlength="2" maxlength="25" />
    </p>
    <p>
        <label for="rank">Rank:</label>
        <input type="text" id="rank" name="rank" size="30" class="required" minlength="4" maxlength="15" />
    </p>
    <p>
        <label for="postCount">Post Count:</label>
        <input type="text" id="postCount" name="postCount" size="6" class="required digits" maxlength="6" />
    </p>
    <p>
        <label for="postCount">Email:</label>
        <input type="text" id="email" name="email" size="30" class="required email" maxlength="30" />
    </p>
    <p>
        <label for="postCount">URL:</label>
        <input type="text" id="url" name="url" value="http://" size="30" class="url" maxlength="40" />
    </p>
    <p>
        <input class="submit" type="submit" value="Submit" />
    </p>
</form> 

You might not understand what all this means yet, nor will most of you ever found use for the label tag but here it is required. We create our
normal form tags and add our type, the action can be added if you wish to do something with this information (this tutorial we will not) we must add
a class and an id. Make sure they are the same.

<label for="name">Name:</label> 

Now we have created our form, we must add labels so Validation knows what to look for. We must add the "for" attribute to the label which
will be equal to the name and the id of the input field followed. Now we have created our label, we need create our input field.

We need to just create a normal input field, but the name and id must be the same and they have to be the same as the label tag that was just before
it. You can add anything else you wish to add to the input tag, but one thing you may not change is the class. The plug-in reads the class and that
is how it knows what to validate. In our first example we only wish to make sure the user inputs something so you just have to add the class
"required". But I don't want them to input more than 25 characters, so I just added;

maxlength="25" 

Which is an atttribute of the input field for text. There are many other words you can add to validate it further. Here I have used;
digits - Only numbers which is required
email - A valid email which is required
url - A valid url, must start with "http://" set by the plugi-in so I have used "value" to help them out. The URL is not required.

There are many others which can be found here.

If it is not validated correctly, it will show an error message next to the textbox. When you click on submit, if one is not valid it will show the
message and not complete the action.


More about the plug-in can be found here;
Plugins/Validation - jQuery JavaScript Library

Plug-in homepage (includes download);
bassistance.de » jQuery plugin: Validation

More plug-ins can be found here;
Plugins - jQuery JavaScript Library

Hope you enjoyed this tutorial. +rep if you liked

Regards,
Brandon

[Jordan]

Nice tutorial, Brandon! +rep

[WingedPanther]

Very cool... I could really use something like this in some of my projects.

[amrosama]

nice tutorial..really

[mendim.]

Really nice Tuto .

[Brandon W]

Thanks everyone. Winged, using this would be much easier than most other ways of validation. I will be using this from now on, also if you read more about the plug-in you can learn how to customize the output.

[WingedPanther]

I have a few pretty OBNOXIOUS validation codes. If this is easier, I'm all for it.

[Brandon W]

OK, can I see your code that you use now? I have John's validation class on my localhost somewhere.

[WingedPanther]

Short version (since I can't hand the code out)...
I have a dynamically generated list of items, each of which has a dynamically generated dropdown list. Based on the item on the dropdown, another field may or may not be mandatory before the form can be submitted.

[Brandon W]

OK Not bad at all