我正在使用JQuery Validate插件来处理表单的验证.我要求在2个地方出错:
>表格的顶部
>在现场一级
我让它在现场级别工作,但我如何让它在顶级和现场级别工作.
在表单的顶部,我希望有这样的东西:
<p>You have the following error messages:</p> <li>First Name - This is a required field</li> <li>Last Name - This a required field</li> <li>Email Address - This is a required field</li>
First Name This is a required field [ ] Last Name This is a required field [ ] Email This is a required field [ ]
这是HTML代码
<html> <body> <div id="errormessages"></div> <form id="myform"> <label for="firstname" class="required">First name</label> <input type="text" required="required" name="firstname" id="firstname" class="textInput" /></div> <label for="lastname" class="required">Last name</label> <input type="text" required="required" name="lastname" id="lastname" class="textInput" /></div> <label for="email" class="required">Email</label> <input type="text" required="required" name="email" id="email" class="textInput" /></div> </form> </body> <html>
$("#myform").validate({ rules: { firstname: { required: true },lastname: { required: true },email: { required: true } },errorPlacement: function(error,element) { error.insertBefore(element); } });
那么我将如何构建代码以在两个位置拥有它?
谢谢
干杯
解决方法
引用OP:
“so how would i build the code to have it at both locations?”
请参阅包含in the documentation的showErrors选项.
这将给你一个良好的开端(需要一些调整)……
$("#myform").validate({ // your rules here,// call back for placement of messages within form errorPlacement: function (error,element) { error.insertBefore(element); },// callback for custom error display showErrors: function (errorMap,errorList) { // summary of number of errors on form var msg = "Your form contains " + this.numberOfInvalids() + " errors,see details below.<br/>" // loop through the errorMap to display the name of the field and the error $.each(errorMap,function(key,value) { msg += key + ": " + value + "<br/>"; }); // place error text inside Box $("#errormessages").html(msg); // also show default labels from errorPlacement callback this.defaultShowErrors(); // toggle the error summary Box if (this.numberOfInvalids() > 0) { $("#errormessages").show(); } else { $("#errormessages").hide(); } } // end showErrors callback });