<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#myform").validate({ errorLabelContainer: "#messageBox", wrapper: "li", submitHandler: function() { alert("Submitted!") } }) }); // --></mce:script> </head> <body> <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> <ul id="messageBox"></ul> <form id="myform" action="/login" method="post"> <label>Firstname</label> <input name="fname" class="required" /> <label>Lastname</label> <input name="lname" title="Your lastname, please!" class="required" /> <br/> <input type="submit" value="Submit"/> </form> </body> </html> errorContainer Selector 显示或者隐藏验证信息 使用一个额外的容器去显示错误信息 Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option). $("#myform").validate({ errorContainer: "#messageBox1, #messageBox2", errorLabelContainer: "#messageBox1 ul", wrapper: "li", debug:true, submitHandler: function() { alert("Submitted!") } }) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#myform").validate({ errorContainer: "#messageBox1, #messageBox2", errorLabelContainer: "#messageBox1 ul", wrapper: "li", debug:true, submitHandler: function() { alert("Submitted!") } }) }); // --></mce:script> <mce:style><!-- #messageBox1, #messageBox2 { display: none } --></mce:style><style mce_bogus="1">#messageBox1, #messageBox2 { display: none }</style> </head> <body> <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> <div id="messageBox1"> <ul></ul> </div> <form id="myform" action="/login" method="post"> <label>Firstname</label> <input name="fname" class="required" /> <label>Lastname</label> <input name="lname" title="Your lastname, please!" class="required" /> <br/> <input type="submit" value="Submit"/> </form> <div id="messageBox2"> <h3>There are errors in your form, see details above!</h3> </div> </body> </html> showErrors Callback Default: None, uses built-in message disply. 得到错误的显示句柄 Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors(). Code Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display. $(".selector").validate({ showErrors: function(errorMap, errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below."); this.defaultShowErrors(); } }) errorPlacement Callback Default: 把错误label放在验证的元素后面 可选错误label的放置位置. First argument: The created error label as a jQuery object. Second argument: The invalid element as a jQuery object. Use a table layout for the form, placing error messags in the next cell after the input. $("#myform").validate({ errorPlacement: function(error, element) { error.appendTo( element.parent("td").next("td") ); }, debug:true }) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#myform").validate({ errorPlacement: function(error, element) { error.appendTo( element.parent("td").next("td") ); }, debug:true }) }); // --></mce:script> </head> <body> <form id="myform" action="/login" method="post"> <table> <tr> <td><label>Firstname</label> <td><input name="fname" class="required" value="Pete" /></td> <td></td> </tr> <tr> <td><label>Lastname</label></td> <td><input name="lname" title="Your lastname, please!" class="required" /></td> <td></td> </tr> <tr> <td></td><td><input type="submit" value="Submit"/></td><td></td> </table> </form> </body> </html> success String , Callback 成功时的class.If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!". 添加"valid" 到验证验证元素, 在CSS中定义的样式 $("#myform").validate({ success: "valid", submitHandler: function() { alert("Submitted!") } }) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#myform").validate({ success: "valid", submitHandler: function() { alert("Submitted!") } }) }); // --></mce:script> <mce:style><!-- label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; height:16px; width:16px; display: block; position: absolute; top: 4px; left: 152px; } --></mce:style><style mce_bogus="1">label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; height:16px; width:16px; display: block; position: absolute; top: 4px; left: 152px; }</style> </head> <body> <form id="myform"> <input type="text" name="email" class="required" /> <br/> <input type="submit" value="Submit" /> </form> </body> </html> 添加"valid" 到验证验证元素, 在CSS中定义的样式,并加入“ok”的文字 $("#myform").validate({ success: function(label) { label.addClass("valid").text("Ok!") }, submitHandler: function() { alert("Submitted!") } }) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#myform").validate({ success: function(label) { label.addClass("valid").text("Ok!") }, submitHandler: function() { alert("Submitted!") } }) }); // --></mce:script> <mce:style><!-- label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; height:16px; width:16px; display: block; position: absolute; top: 4px; left: 152px; padding-left: 18px; } --></mce:style><style mce_bogus="1">label.valid { background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; height:16px; width:16px; display: block; position: absolute; top: 4px; left: 152px; padding-left: 18px; }</style> </head> <body> <form id="myform"> <input type="text" name="email" class="required" /> <br/> <input type="submit" value="Submit" /> </form> </body> </html> highlight Callback Default: Adds errorClass (see the option) to the Element 高亮显示错误信息。 或者说重写出错时的出错元素的显示。Override to decide which fields and how to highlight. Code Highlights an invalid element by fading it out and in again. $(".selector").validate({ highlight: function(element, errorClass) { $(element).fadeOut(function() { $(element).fadeIn() }) } }) Code Adds the error class to both the invalid element and it's label $(".selector").validate({ highlight: function(element, errorClass) { $(element).addClass(errorClass); $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); }, unhighlight: function(element, errorClass) { $(element).removeClass(errorClass); $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); } }); unhighlight Callback Default: 默认是去掉error类 Called to revert changes made by option highlight, same arguments as highlight.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">