如何仅在提交时显示jQuery Validation错误容器 [英] How to display jQuery Validation error container only on submit
问题描述
我正在努力使验证插件正常工作。它适用于单个字段，但是当我尝试包含包含所有错误的错误容器的演示代码时，我遇到了问题。问题是，当我在所有字段中时，它显示容器包含所有错误，但我想仅在用户按下提交按钮时显示错误容器（但在失去焦点时仍然在控件旁边显示内联错误）。 / p>
问题是容器中的消息。当我在下面的答案中提到容器的代码时，容器输出只显示纯文本中的错误数。
获取详细错误消息列表的技巧是什么？我想要的是当用户按下标签按钮时在控件旁边显示错误，并在按下提交时在结尾处显示所有内容的摘要。这可能吗？
来自此处的所有输入的代码：
$（）。ready（function（）{
var container = $（'div.containererreurtotal'）;
//在密钥上验证注册表单并提交
$（＃frmEnregistrer）。bind（invalid-form.validate，function（e，validator）{
var err = validator.numberOfInvalids（）;
if（err） {
container.html（有地方+错误+表格中的错误）
container.show（）;
} else {
container.hide（）;
}
}）。验证（{
规则：{
nickname_in：{
required：true，
minLength：4
}，
prenom_in：{
required：true，
minLength：4
}，
nom_in：{
required：true，
minLength：4
}，
password_in：{
required： true，
minLength：
$ b}，
courriel_in：{
required：true，
email：true
}，
userdigit：{需要
：真
}
}，
消息：{
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）;
}
}）;
}）;
您将在<找到元选项的文档a href =http://docs.jquery.com/Plugins/Validation/validate#toptions =noreferrer> http://docs.jquery.com/Plugins/Validation/validate#toptions
如果要在单独的错误容器中显示输入 AND 旁边的错误，则需要覆盖 errorPlacement 回调。
来自您的示例：
...
courriel_in：ERROR，
userdigit：ERROR
}
，errorContainer：container
，errorPlacement：function（错误，元素）{
var errorClone = error.clone（）;
container.append（errorClone）;
error.insertAfter（element）
}
//我们不需要这个选项
//，errorLabelContainer：$（ol，container）
//，包装器：'li'
//，meta：validate
}）;
...
错误 parameter是一个包含< label> 标记的jQuery对象。 元素参数是验证失败的输入。
更新评论
使用上面的代码，错误容器不会清除错误，因为它包含克隆的副本。如果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（）;
}）;
}
...
试一试
I am trying to make the Validation plugin work. It works fine for individual fields, but when I try to include the demo code for the error container that contains all of the errors, I have an issue. The problem is that it shows the container with all errors when I am in all fields, but I would like to display the error container only when the user presses the submit button (but still show inline errors beside the control when losing focus).
The problem is the message in the container. When I took off the code as mentioned in the answer below for the container, the container output just displays the number of errors in plain text.
What is the trick to get a list of detailed error messages? What I would like is to display "ERROR" next to the control in error when the user presses the tab button, and to have a summary of everything at the end when he presses submit. Is that possible?
Code with all input from here:
$().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);
}
});
});
You will find the documentation for the meta option in http://docs.jquery.com/Plugins/Validation/validate#toptions
If you want to display the errors beside the inputs AND in a separate error container you will need to override the errorPlacement callback.
From your example:
...
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"
});
...
The error parameter is a jQuery object containing a <label> tag. The element parameter is the input that has failed validation.
Update to comments
With the above code the error container will not clear errors because it contains a cloned copy. It's easy to solve this if jQuery gives a "hide" event, but it doesn't exist. Let's add a hide event!
- First we need the AOP plugin
We add an advice for the hide method:
jQuery.aop.before({target: jQuery.fn, method: "hide"}, function(){ this.trigger("hide"); });We bind the hide event to hide the cloned error:
... ,errorPlacement: function(error, element){ var errorClone = error.clone(); container.append(errorClone); error.insertAfter(element).bind("hide", function(){ errorClone.hide(); }); } ...
Give it a try
这篇关于如何仅在提交时显示jQuery Validation错误容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
