Have you ever wanted to show one error message at a time, or create a different type of visual queue for a specific invalid element on a form? Using the validate options, you can easily create any effect you want.
The example below, is designed to show the first error message in a form and to set focus on that first element. The message is displayed in a basic JavaScript alert box, not very elegant but it makes for a simple demo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Show JS Alert - First Validation Error</title> <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script> <script src="Scripts/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#elForm").validate({ onfocusout: false, invalidHandler: function(form, validator) { var errors = validator.numberOfInvalids(); if (errors) { alert(validator.errorList[0].message); validator.errorList[0].element.focus(); } }, rules: { TextBox1: { required: true, minlength: 2 }, TextBox2: { required: true, minlength: 2 }, TextBox3: { required: true, minlength: 2 } }, messages: { TextBox1: { required: "TextBox1 Required", minlength: "TextBox1 MinLength" }, TextBox2: { required: "TextBox2 Required", minlength: "TextBox2 MinLength" }, TextBox3: { required: "TextBox3 Required", minlength: "TextBox3 MinLength" } }, errorPlacement: function(error, element) { // Override error placement to not show error messages beside elements // } }); }); </script> <style type="text/css"> label { width: 90px; display: block; float: left; } ul { list-style: none; } ul li { line-height: 1.8; } </style> </head> <body> <form id="elForm" action="#"> <div> <h1>jQuery Validation - Show First Error Only</h1> <ul> <li><label>Text Box 1</label><input type="text" name="TextBox1" id="TextBox1" value="" /></li> <li><label>Text Box 2</label><input type="text" name="TextBox2" id="TextBox2" value="" /></li> <li><label>Text Box 3</label><input type="text" name="TextBox3" id="TextBox3" value="" /></li> </ul> <input type="submit" id="submit" value="Validate" /> </div> </form> </body> </html>
Here are the important parts to focus on.
1. invalidHandler, this option give you access to the current validator and all the errors messages/items via the “validator.errorlist”.
invalidHandler: function(form, validator) { var errors = validator.numberOfInvalids(); if (errors) { alert(validator.errorList[0].message); //Only show first invalid rule message!!! validator.errorList[0].element.focus(); //Set Focus } }
2. errorPlacement, this function controls how error messages are displayed. Since we don’t want any error messages displayed by default, we can override the default errorPlacement with a empty method call.
errorPlacement: function(error, element) { // Override error placement to not show error messages beside elements // }
The end result is a alert box showing the first broken rule for the first invalid element on the page. In the example each input has 2 rules (required and minLength), if you enter a single character into the first text box the message will change from “TextBox1 Required” to “TextBox1 MinLength”.
#1 by Nadeem on July 16, 2017 - 3:31 am
Quote
That’s look great work but with invalidHandler the problem is it does’t work on keyup its only work on submitting the form, is there way to achieve it at keyup ?
#2 by karthik on July 2, 2014 - 5:54 am
Quote
Thank You Very Much!!
#3 by Ariel on November 27, 2013 - 9:17 pm
Quote
Thanks for this tip.
Just what I was looking for!
Excellent!
#4 by Eleazer Madiam on September 19, 2013 - 1:05 am
Quote
Thanks for sharing this idea. I’ve modified a part of it so it will be displayed in Jquery UI modal. Thank you!
#5 by Shinu on October 25, 2012 - 10:42 pm
Quote
Thank you. You saved my time
#6 by Ali Andalibi on May 22, 2012 - 3:43 am
Quote
Thanks
#7 by Leandro Carvalho on February 2, 2012 - 1:52 pm
Quote
GReattt