显示多个字段的单个错误消息（jQuery validate plugin）
我正在使用jQuery validate插件来validation表单。 我在表单上validation的字段是"To", "CC", "Bcc" 。 如果上述两个或多个字段有值且无法通过validation，那么我想显示一条错误消息"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(""); }; 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('Email with link to ' + urlfield + '' + ' was successfully sent!
')); $("#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选项 …它用于将来自多个字段的消息分组为一个…
rules: { To: { multiemail: true }, Cc: { multiemail: true }, Bcc: { multiemail: true } }, groups: { someGroup: "To Cc Bcc" }
来自文档：
“指定错误消息的分组。组由任意组名称作为键，空格分隔的元素名称列表作为值。使用
errorPlacement控制组消息的放置位置。”
顺便说一句：字段名称周围不需要引号，除非它们包含会破坏JavaScript的特殊字符，如点或括号。