Just about everyone who’s ever made a web-application knows that you generally can’t trust your users to enter data correctly into a form. Some of them will ignore important fields, others will type in data that couldn’t possibly be right. Some will try to choose two character passwords and others will enter in a long string of text when all you wanted to do was get their age in the form of numbers.
A lot of these errors can be mitigated by using the right input controls. You want to use the right HTML input control for the right situation.. You certainly wouldn’t want to use a textbox to have someone enter in their gender and you definitely don’t want to use a drop down list to have someone enter their email address. Although using the right input controls for the right questions takes a long way in helping ensure that we get good data, that alone isn’t enough.
When it comes to textboxes, you’ll often want to make sure whatever they type in meets a specific format, such as a phone-number or an email address. You might also want to make surethey actually do type -something- in, or make sure that they type the same thing in two fields if you want to confirm that something’s accurate.
Microsoft does a pretty good job of making this happen in ASP.NET with their validation controls. More often than not, the validation controls will simply generate some javascript to perform the validation, but there’s also an option to have it validate at the server-side level. If you’d like to have a bit more control over your validators there’s some code in JQuery that we can use to make sure users what enter in good data.
The example code I’m going to demonstrate today is based off the JQuery Validate plugin.
Here’s How to Validate Text Boxes with JQuery
(1) Download and Reference JQuery and the JQuery Validation Library
You’ll need a copy of JQuery 1.2.6+ on your system, which can be downloaded from Google.You’ll also need a copy of the JQuery Validation library, available from bassistance.de. Once you get your two libraries download, you can extract the minified version of both of them into a folder, create a new HTML page and add your header references that should look something like this:
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.validate.min.js” type=”text/javascript”></script>
(2) Building your form
For this example, we’ll make a basic contact form that requires the person to enter their name, their email address and some comments. All of the fields will be required and we will also make sure that the user’s email address was entered in the correct format.
Here’s what the form will look like:
<form class=”cmxform” id=”commentForm” method=”get” action=””>
<fieldset>
<p>
<label for=”cname”>Name</label>
<em>*</em><input id=”cname” name=”name” size=”25″ class=”required” minlength=”2″ />
</p>
<p>
<label for=”cemail”>E-Mail Address</label>
<em>*</em><input id=”cemail” name=”email” size=”25″ class=”required email” />
</p>
<p>
<label for=”ccomment”>Comments:</label>
<em>*</em><textarea id=”ccomment” name=”comment” cols=”22″ class=”required”></textarea>
</p>
<p>
<input class=”submit” type=”submit” value=”Submit”/>
</p>
</fieldset>
</form>
There are a few things to note about this form. First, that all of the inputs have been given a class of “required”. This is how the JQuery library will know whether or not to validate them. If you don’t want a field to be required, simply leave it out. You’ll also note on the “E-Mail Address” field, that it has a class of class=”required email”, this will let the function know that what the user enters in also has to be a valid email address.
(3) Calling the Validation Method
Finally, we need to invoke the validation method when the page loads. We can do this with the $(document).ready() function like this:
<script>
$(document).ready(function(){
$(“#commentForm”).validate();
});
</script>
If you give you form a different ID, make sure that the ID of the form matches what you’re calling in your onLoad function.
(4) The Results
If all is well with your code, you should end up with something like this after clicking the submit button:
You can download my example code here. You can also download the full JQuery Validation Library with some more advanced examples.