显示多个字段的单个错误消息（jQuery validate plugin） [英] Show a single error message for multiple fields (jQuery validate plugin )

问题描述

我正在使用jQuery validate插件来验证表单。我在表单上验证的字段是To，CC，Bcc。如果上述两个或多个字段有值且无法通过验证，那么我想显示一条错误消息一个或多个电子邮件地址无效。

I'm using the jQuery validate plugin to validate a form. The fields I validate on the form are "To", "CC", "Bcc". If two or more of the above mentioned fields has a value and won't pass the validation then I would like to show a single error message "One or more email addresses are invalid".

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

Pasted below is the working code which shows the error message three times if the input for To, Cc, Bcc is incorrect.

代码：

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");
    }
}

推荐答案

使用 groups 选项 ...用于对来自的邮件进行分组几个字段合为一个......

Use the groups option... it's for grouping messages from several fields into one...

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

来自文档：

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

"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."

BTW：字段名称周围不需要引号，除非它们包含特殊字符，例如点或括号，会破坏JavaScript。

这篇关于显示多个字段的单个错误消息（jQuery validate plugin）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！