如何仅在提交时显示jQuery Validation错误容器
我正在尝试使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); } }); }); 您可以在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参数是validation失败的输入。
更新评论
使用上面的代码，错误容器不会清除错误，因为它包含克隆的副本。 如果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(); }); } ...
试试看
首先你的容器应该使用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）和每个错误的
- （这个元素在“wrapper”行中指定）
如果指定#containererreurtotal为display：none; 在你的CSS中，你不需要就绪函数中的第一行（$（’div＃containererreurtotal’）。hide（）;）
我会删除errorContainer，然后拦截回发上的validation，并在那里手动添加容器错误，如下所示：
$("#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({ ... })
我有一个稍微不同的解决方案：
jQuery(document).ready(function() { var submitted = false; var validator = jQuery("#emailForm").validate({ showErrors: function(errorMap, errorList) { if (submitted) { var summary = ""; jQuery.each(errorList, function() { summary += ""; }); jQuery("#errorMessageHeader").show(); jQuery("#errorMessageHeader").children().after().html(summary); submitted = false; } this.defaultShowErrors(); }, invalidHandler: function(form, validator) { submitted = true; }, onfocusout: function(element) { this.element(element); }, errorClass: "formError", rules: { //some validation rules }, messages: { //error messages to be displayed } }); });
我用以下短代码解决了这个问题：
errorElement: "td", errorPlacement: function (error, element) { error.insertAfter(element.parent()); }
我的结构如下：
Name:
所以我的错误现在会直接显示在后面的
我不知道validation插件是否为此提供了一个选项，但你可以使用标准的jQuery来实现你想要的。 通过将显示样式设置为none，确保最初隐藏容器：
然后，您可以将onsubmit事件连接到表单，只要尝试提交表单，就会使容器可见：
jQuery('#formId').onsubmit(function() { // This will be called before the form is submitted jQuery('#container').show(); });
希望将它与现有代码相结合应该可以解决问题。