同时显示摘要和使用jQuery验证插件单独的错误信息 [英] Display both summary and individual error messages using the jQuery validation plugin

问题描述

我如何为jQuery插件显示两个单独的错误信息和总结？

我居然发现<一href="http://stackoverflow.com/questions/2520119/display-both-jquery-validation-summary-and-individual-error-messages">a类似的问题，但它只是引用了一些钩子，我可以使用，但我不知道从哪里开始。

我得到了显示各个错误消息的一部分，但我需要在提出一个警告框，显示摘要，并且插件可以找到的这里。

刚刚发现如何，感谢大卫的code，和我的跟进问题 - 警报框将是第一名称：请输入有效的名字

低于code：

  $（文件）。就绪（函数（）{
    VAR提交= FALSE;
    （'.selector'）。验证（{
        showErrors：功能（errorMap，errorList）{
            如果（提交）{
                VAR汇总=您有以下错误：\ N的;
                $每个（errorMap，功能（键，值）{
               总结+ =键+：+价值+\ N的;
                }）;
                警报（摘要）;
                提交= FALSE;
            }
            this.defaultShowErrors（）;
        }，
        invalidHandler：功能（形式验证）{
            提交=真正的;
        }
    }）;
}）;
 

解决方案

由于链接的问题说，在 showErrors 回调时，要调用错误显示。您可以使用它来创建你的总结和提醒吧。然后，您可以调用 this.defaultShowErrors（）显示正常个体的错误消息。

在默认情况下showErrors叫了很多事件（提交，KEYUP，模糊等）。你既可以禁用这些，或使用 invalidHandler 方法，当一个无效的表单提交这是只有调用。

例如：

  $（文件）。就绪（函数（）{
    VAR提交= FALSE;
    （'.selector'）。验证（{
        showErrors：功能（errorMap，errorList）{
            如果（提交）{
                VAR汇总=您有以下错误：\ N的;
                $每个（errorList，函数（）{摘要+ =*+ this.message +\ N;}）;
                警报（摘要）;
                提交= FALSE;
            }
            this.defaultShowErrors（）;
        }，
        invalidHandler：功能（形式验证）{
            提交=真正的;
        }
    }）;
}）;
 

请参阅此处的选项可以传递给验证方法。

How can I display both individual error messages and summary for the jQuery plugin?

I actually found a similar question , but it just references some hooks I can use, but I'm not sure where to start.

I got the displaying individual error messages part, but I need to display the summary in an alert box on submit, and plugin can be found here.

Just found out how, thanks for David's code, and on my follow-up question - The alert box would be "First Name: Please enter a valid First Name".

Code below:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorMap, function(key, value) {
               summary += key + ': ' + value + "\n";
                });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

解决方案

As the linked question says, the showErrors callback is called whenever errors are shown. You can use this to create your summary and alert it. You can then call this.defaultShowErrors() to display the normal individual error messages.

By default showErrors is called for a lot of events (submit, keyup, blur, etc). You could either disable those, or use the invalidHandler method which is only called when an invalid form is submitted.

Example:

$(document).ready(function() {
    var submitted = false;
    ('.selector').validate({
        showErrors: function(errorMap, errorList) {
            if (submitted) {
                var summary = "You have the following errors: \n";
                $.each(errorList, function() { summary += " * " + this.message + "\n"; });
                alert(summary);
                submitted = false;
            }
            this.defaultShowErrors();
        },          
        invalidHandler: function(form, validator) {
            submitted = true;
        }
    });
});

See here for a complete list of options that can be passed to the validate method.

这篇关于同时显示摘要和使用jQuery验证插件单独的错误信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！