Client Side Validation with jQuery

Validating user input on the client definitely has its advantages. It not only avoids unnecessary round trips to the server but it can also drastically improve the user experience. When I think about client side validation I think about jQuery. If you are familiar with jQuery, then you know that there are a ton a plug-ins available. Just like an Apple IPod has “an app for that”,  jQuery has a “plugin for that”. Anyway, after a quick search I discovered the jQuery Validation plugin.

There are two different ways to use the Validation plugin. The first way, is to the pure JavaScript route. This means you establish all the validation rules, messages and callback events from code. The second way is to decorate your input fields with special CSS classes. The plugin will then inspect the class attribute of each field at runtime and apply validation rules accordingly. In the upcoming example, I used the CSS approach. However, if you decided that you want to go in the other direction there are some excellent demos on the validation plugin homepage.

There are a bunch of different class names that the plugin will honor. The most basic class name is required. However in addition to checking if a field is required you can also perform pattern matching. For example my form has an email field. When someone fills out this field I not only want it to be required, but I also want to make sure that a valid email address is entered. In order to achieve this I use the class name required email. Similar validators are available for website addresses, dates, credit card numbers and more. See the documentation page for the complete list.

Here is a  screenshot of my comment form:

Here is the HTML markup for my form. Notice the class names used in each of the input fields. From the html you can deduce that the full name is required. The Email is required and must be a valid address. The website field is optional but if text is entered is must be a valid URL. Finally, the comment field is required: 

<form id="comment_form" action="#">
<fieldset>
    <ul>
        <li>
            <label>Full Name *</label>                
            <input type="hidden" id="postID" name="postID" value='<%=Model.ID %>' />
            <input type="text" id="author" name="author" class="required" value="" size="40"/>
        </li>
        <li>
            <label>Email *</label>
            <input type="text" id="email" name="email" class="required email" value="" size="40"/>
        </li>        
        <li>
            <label>Website</label>
            <input type="text" id="website" name="website" class="url" size="40" />
        </li>        
        <li>
            <label>Comment *</label>
            <textarea id="comments" name="comments" rows="8" cols="60" class="required"></textarea>
        </li>
        <li>
            <label></label>
            <input type="submit" id="btnSaveComment" value="Save Comment" class="submit" />        
            <img id="ajax_loading" src="/Content/images/ajax_loading.gif" alt="loading" />          
        </li>
    </ul>
</fieldset>
</form>     

To wire up the plug-in you only need one line of code in the document.ready event:

var validator = $("#comment_form").validate();

Summary

Client side validation is a great way to enhance user experience. However, keep in mind that client side and server side validation can be used together. As always, pick the right tool for the job. For example, if you are working with mobile devices that have limited capabilities it may make more sense to use server-side validation.