我正在尝试制作 Validation plugin工作。它适用于个别字段,但当我尝试包含包含所有错误的错误容器的演示代码时,我遇到了问题。问题是当我在所有字段中时它会显示包含所有错误的容器,但我只想在用户按下提交按钮时显示错误容器(但在失去焦点时仍会在控件旁边显示内联错误)。
问题是容器中的消息。当我取消容器下面的答案中提到的代码时,容器输出仅以纯文本形式显示错误数。
获取详细错误消息列表的诀窍是什么?我想要的是当用户按下选项卡按钮时在错误的控件旁边显示“ERROR”,并在他按下提交时在最后显示所有内容的摘要。这可能吗?
包含所有输入的代码:
$().ready(function() {
var container = $('div.containererreurtotal');
// validate signup form on keyup and submit
$("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) {
var err = validator.numberOfInvalids();
if (err) {
container.html("THERE ARE "+ err + " ERRORS IN THE FORM")
container.show();
} else {
container.hide();
}
}).validate({
rules: {
nickname_in: {
required: true,
minLength: 4
},
prenom_in: {
required: true,
minLength: 4
},
nom_in: {
required: true,
minLength: 4
},
password_in: {
required: true,
minLength: 4
},
courriel_in: {
required: true,
email: true
},
userdigit: {
required: true
}
},
messages: {
nickname_in: "ERROR",
prenom_in: "ERROR",
nom_in: "ERROR",
password_in: "ERROR",
courriel_in: "ERROR",
userdigit: "ERROR"
}
,errorPlacement: function(error, element){
container.append(error.clone());
error.insertAfter(element);
}
});
});
最佳答案
首先你的容器应该使用一个 ID 而不是一个类..(我假设 ID 是'containererreurtotal')
然后试试这个..
$().ready(function() {
$('div#containererreurtotal').hide();
// validate signup form on keyup and submit
$("#frmEnregistrer").validate({
errorLabelContainer: "#containererreurtotal",
wrapper: "p",
errorClass: "error",
rules: {
nickname_in: { required: true, minLength: 4 },
prenom_in: { required: true, minLength: 4 },
nom_in: { required: true, minLength: 4 },
password_in: { required: true, minLength: 4 },
courriel_in: { required: true, email: true },
userdigit: { required: true }
},
messages: {
nickname_in: { required: "Nickname required!", minLength: "Nickname too short!" },
prenom_in: { required: "Prenom required!", minLength: "Prenom too short!" },
nom_in: { required: "Nom required!", minLength: "Nom too short!" },
password_in: { required: "Password required!", minLength: "Password too short!" },
courriel_in: { required: "Courriel required!", email: "Courriel must be an Email" },
userdigit: { required: "UserDigit required!" }
},
invalidHandler: function(form, validator) {
$("#containererreurtotal").show();
},
unhighlight: function(element, errorClass) {
if (this.numberOfInvalids() == 0) {
$("#containererreurtotal").hide();
}
$(element).removeClass(errorClass);
}
});
});
我在这里假设您想要在每个单独的错误周围添加一个
标记。通常,我使用
- 容器作为实际容器(而不是您使用的称为“containererreurtotal”的 div),并为每个错误使用
- (此元素在“包装器”行中指定)
如果将#containererreurtotal 指定为显示:无;在你的 CSS 中,那么你不需要 ready 函数中的第一行( $('div#containererreurtotal').hide(); )
关于javascript - 如何仅在提交时显示 jQuery 验证错误容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/285428/