我正在使用jQuery验证插件来验证表单。所有字段都是必填字段,表单上的错误消息空间有限,因此,如果我的规则中的任何字段未完成,是否可以显示一条错误消息,上面写着"在提交表单之前必须填写所有字段"?
我的jQuery知识有限,我只能从示例中弄清楚如何设置它,以便使用以下代码为每个字段输出单独的错误消息:
$(".contact-form").validate({
errorLabelContainer: ".form-errors",
wrapper: "li",
ignore: ".ignore",
errorElement: "em",
rules: {
first_name: { required: true },
last_name: { required: true },
email: { required: true, email: true }
},
messages: {
first_name: "Please enter your first name",
last_name: "Please enter your last name",
email: { required: "Please enter your email address", email: "Your email address must be in the format of name@domain.com" }
},
});
这将完成您所要求的操作:
爪哇语
$(".contact-form").validate({
ignore: ".ignore",
rules: {
first_name: {
required: true
},
last_name: {
required: true
},
email: {
required: true,
email: true
}
},
showErrors: function(errorMap, errorList) {
$(".form-errors").html("All fields must be completed before you submit the form.");
}
});
演示
尽管当有人输入错误的电子邮件地址时,此错误消息不是很好,因为所有字段都已填写,但表单中仍然存在错误。
另外,请注意,您可以通过将其class
属性设置为required
来指定表单中的必填字段:
.HTML
<form class="contact-form" type="post" action="">
<input type="text" name="first_name" id="first_name" class="required" />
<input type="text" name="last_name" id="last_name" class="required" />
<input type="email" name="email" id="email" class="required email" />
<input type="submit" />
<div class="form-errors"></div>
</form>
爪哇语
$(".contact-form").validate({
showErrors: function(errorMap, errorList) {
$(".form-errors").html("All fields must be completed before you submit the form.");
}
});
演示
看起来 invalidHandler 就是你需要的。看看这个例子(来源:http://docs.jquery.com/Plugins/Validation/validate#toptions):
$(".selector").validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
}
})
fxnReqValidation = function (event) {
$("#errormsg").empty();
$("input:text").each(function (index, InputElement) {
var Ele = g_Json[InputElement.name];
if ((Ele.required) && (InputElement.value == "" || null)) {
$("#errormsg").append("" + All fields must be completed before you submit the form + "");
}
});
event.preventDefault();
}
这可能对您有所帮助。
您可以使用 toggle() 方法在消息之间切换并使用 jquery 插件...它认为它更快更好,更容易编码...