我正在尝试使Validation插件工作.它适用于单个字段,但是当我尝试包含包含所有错误的错误容器的演示代码时,我遇到了问题.问题是,当我在所有字段中时,它显示容器包含所有错误,但我想仅在用户按下提交按钮时显示错误容器(但在失去焦点时仍然在控件旁边显示内联错误).
问题是容器中的消息.当我在下面的答案中提到容器的代码时,容器输出只显示纯文本中的错误数.
获取详细错误消息列表的技巧是什么？我想要的是当用户按下标签按钮时在控件旁边显示"错误",并在按下提交时在结尾处显示所有内容的摘要.那可能吗？
来自此处的所有输入的代码:
$().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);
}
});
});
FerrousOxide.. 16
首先你的容器应该使用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为display:none; 在你的CSS中,你不需要就绪函数中的第一行($('div#containererreurtotal').hide();)
首先你的容器应该使用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为display:none; 在你的CSS中,你不需要就绪函数中的第一行($('div#containererreurtotal').hide();)
您可以在http://docs.jquery.com/Plugins/Validation/validate#toptions中找到meta选项的文档.
如果要在单独的错误容器中显示输入AND旁边的错误,则需要覆盖errorPlacement回调.
从你的例子:
...
courriel_in: "ERROR",
userdigit: "ERROR"
}
,errorContainer: container
,errorPlacement: function(error, element){
var errorClone = error.clone();
container.append(errorClone);
error.insertAfter(element)
}
// We don't need this options
//,errorLabelContainer: $("ol", container)
//,wrapper: 'li'
//,meta: "validate"
});
...
该error参数是包含标记的jQuery对象.该element参数是验证失败的输入.
使用上面的代码,错误容器不会清除错误,因为它包含克隆的副本.如果jQuery给出一个"隐藏"事件,它很容易解决,但它不存在.让我们添加一个隐藏事件!
首先我们需要AOP插件
我们为hide方法添加了一个建议:
jQuery.aop.before({target: jQuery.fn, method: "hide"},
function(){
this.trigger("hide");
});
我们绑定hide事件以隐藏克隆的错误:
...
,errorPlacement: function(error, element){
var errorClone = error.clone();
container.append(errorClone);
error.insertAfter(element).bind("hide", function(){
errorClone.hide();
});
}
...
试试看
京公网安备 11010802040832号 | 京ICP备19059560号-6 