javascript - 显示多个字段的单个错误消息(jQuery 验证插件)

Question

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

下面粘贴的是工作代码，如果输入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

使用the groups option ...它用于将来自多个字段的消息分组到一个...

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

来自文档:

"Specify grouping of error messages. A group consists of an arbitrary group name as the key and a space separated list of element names as the value. Use errorPlacement to control where the group message is placed."

<小时/>

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