我正在使用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>
在表单级别放置错误消息的jQuery代码:
$("#myform").validate({
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true
}
},
errorPlacement: function(error, element) {
error.insertBefore(element);
}
});
所以我将如何构建代码以使其在两个位置都具有?
谢谢干杯
引用OP:
“那么我将如何构建在两个位置都具有的代码?”
请参阅文档中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
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句