JAVASCRIPT

Comparing Fields and Customizing Error Messages with jQuery`s Validator Plug-in

Welcome to the final installment of the series that shows you how to check online forms with the Validator jQuery plug-in. Made up of seven tutorials, this series explores the most useful features that come packaged with this library, and shows you how to use them for performing strict validation on your own HTML forms.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

November 10, 2009

TABLE OF CONTENTS:

A good ending for this last article of the series consists of demonstrating how to display customized error messages when using the Validator plug-in. In this case, I’m going to use a method called “showErrors()” that allows you to show a certain number of messages before validating the selected web form.

A simple usage of the “showErrors()” method is shown below. So, pay close attention to the corresponding code sample, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on validating web form with the showErrors() method</title>

$(document).ready(function(){

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

validator.showErrors({"username": "Enter your first name, please","password": "Enter your password, please"});

});

</script>

</head>

<body>

<p>Password <input type="password" name="password" class="required" /></p>

</form>

</body>

</html>

As depicted in the previous hands-on example, the "showErrors()” method has been assigned to a “validator” object to display a few customized error messages after the targeted web form has been rendered on the browser. If you try out this particular example on your own web server, then you’ll see that each of these messages will be shown next to each associated field, providing users with a neat guide to what types of values should be entered in the fields in question.

Nevertheless, if this explanation sounds a bit confusing to you, below I included an additional screen capture that will help you grasp very quickly how the “showErrors()” method does its thing. Here it is:

See how simple it is to configure the Validator plug-in to display personalized error messages? I guess you do. However, if you still have some doubts on how the “showErrors()” method functions, then I suggest you play with the code sample for a while, so you can acquire a better understanding of this handy plug-in option.

Final thoughts

It’s hard to believe, but we’ve come to the end of this series. Nonetheless, I think that the whole experience has been instructive, since you learned how to use the main options provided by the Validator jQuery plug-in to check web forms in all sorts of clever ways.

In my personal opinion, when it comes to validating HTML forms in the client, this plug-in is one of the best choices available nowadays for performing this task in a truly simple manner. So, what are you waiting for? Give it a try right now!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.