JQuery在多个位置(表单顶部和表单级别)验证自定义错误消息 [英] JQuery Validate Custom Error messages in multiple places (top of form and at form level)
问题描述
我正在使用JQuery Validate插件来处理我的表单的验证.我要求在2个地方出现错误:
I am using the JQuery Validate plugin to handle validation for my forms. I have a requirement to have the error at 2 places:
- 表格顶部
- 在现场一级
我让它在实地工作，但是如何使它在高层和实地工作.
I have it working at the field level, but how do I get it to work for both the top and at the field level.
在表单顶部，我想要这样的东西:
At the top of the form, I want to have something like this:
<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>
在表单级别，我显示了这样的错误消息，该错误消息正在起作用:
At the form level, i have error messages showing up such as this which is working:
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>
用于在表单级别放置错误消息的jQuery代码:
Jquery code for error messages placed at the form level:
$("#myform").validate({
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true
}
},
errorPlacement: function(error, element) {
error.insertBefore(element);
}
});
那么我将如何构建代码以使其在两个位置都具有?
so how would i build the code to have it at both locations?
谢谢 干杯
推荐答案
引用OP :
那么，我将如何构建在两个位置都具有的代码?"
See the showErrors option as contained in the documentation.
这将为您提供一个良好的开端(需要进行一些调整)...
This will give you a good start (needs some tweaking)...
$("#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
});
工作示例: http://jsfiddle.net/M5pzA/
Working DEMO: http://jsfiddle.net/M5pzA/
这篇关于JQuery在多个位置(表单顶部和表单级别)验证自定义错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
