Show a single error message for multiple fields (jQuery validate plugin )

Question

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

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

code :

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

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

From the docs:

"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: Quotes are not required around the field names unless they contain special characters, like dots or brackets, that would break the JavaScript.