显示多个字段的单个错误消息（jQuery validate plugin）

Question

我正在使用jQuery validate插件来验证表单。 我在表单上验证的字段是"To", "CC", "Bcc" 。 如果上述两个或多个字段具有值并且无法通过验证，那么我想显示一条错误消息"One or more email addresses are invalid" 。

下面粘贴的是工作代码，如果To, Cc, Bcc的输入不正确To, Cc, Bcc则会三遍显示错误消息。

代码：

App.CreateSendEmailDialogForReports = function (title, reportUrl, from) {

    var dialogOpts = {}
    dialogOpts.autoOpen = false;
    dialogOpts.modal = true;
    dialogOpts.title = 'Send Email';
    dialogOpts.width = 640;
    dialogOpts.draggable = true;
    dialogOpts.resizable = false;
    dialogOpts.show = { effect: 'drop', direction: 'up' };
    dialogOpts.hide = { effect: 'drop', direction: 'up' };
    dialogOpts.close = function (event, ui) {
        $(this).dialog("destroy");
        App.SendEmailReports = undefined;
        $("#dvSendEmail").remove();
        $("#dvReports").append("<div id='dvSendEmail'></div>");
    };
    dialogOpts.open = function (event, ui) {

        //set the focus on the checkbox to avoid focus on the To or Note field as on focus clears the default messages
        document.getElementById('CopyMeBox').focus();

        $.validator.addMethod("multiemail", function (value, element) {
            if (this.optional(element)) // return true on optional element
                return true;

            var emails = value.split(new RegExp("\\s*,\\s*", "gi"));
            valid = true;
            for (var i in emails) {
                value = emails[i];
                value = value.commaTrim().trim();
                if (value.length == 0)
                    continue;
                try {
                    valid = valid && $.validator.methods.email.call(this, value, element);
                } catch (e) {
                    App.log(e.toString());
                }

            }
            return valid;
        }, 'One or more email addresses are invalid');


        $("#frmSendEmail", "#dvSendEmail").validate({
            errorLabelContainer: "#msgBox",
            wrapper: "li",
            onfocusout: false,
            submitHandler: function (form) {
                var $form = $(form);
                var url = $form.attr('action');
                var tofield, fromfield, notesfield, urlfield, reportNamefield, ccfield, bccfield, subjectfield;
                // get some values from elements on the page:
                tofield = $form.find('#To').val();

                ccfield = $form.find('#Cc').val();
                bccfield = $form.find('#Bcc').val();
                subjectfield = $form.find('#Subject').val() ;

                fromfield = $form.find('#From').val();



                //Send the data using post and put the results in a div                   

                $.post(url, { To: tofield, Cc: ccfield, Bcc: bccfield, Subject: subjectfield, From: fromfield },
                    function (data) {
                        var content = document.createElement('h3').appendChild(document.createTextNode('<p>Email with link to <b>' + urlfield + '</b>' + ' was successfully sent!</p>'));
                        $("#frmSendEmail", "#dvSendEmail").empty().append(content.data);
                        setTimeout(function () { App.SendEmailReports.dialog("close"); }, 1000);

                    }
                    );
            },
            rules: {
                'To': {
                    multiemail: true
                },
                 'Cc': {
                    multiemail: true
        },
                 'Bcc': {
                     multiemail: true
                 }
            }

        });

    };

    if (typeof App.SendEmailReports != "undefined") {
        App.SendEmailReports.dialog("open");
    }
    else {
        App.SendEmailReports = $('#dvSendEmail').dialog(dialogOpts);
        App.SendEmailReports.dialog("open");
    }
}

Answer 1

使用groups选项 ...用于将来自多个字段的邮件分组为一个...

rules: {
    To: {
        multiemail: true
    },
    Cc: {
        multiemail: true
    },
    Bcc: {
        multiemail: true
    }
},
groups: {
    someGroup: "To Cc Bcc"
}

从文档：

“指定错误消息的分组。一个组由一个任意的组名作为关键字，并由一个用空格分隔的元素名称列表作为值。使用errorPlacement控制组消息的放置位置。”

---

顺便说一句：字段名称周围不需要引号，除非它们包含会破坏JavaScript的特殊字符（如点或括号）。