jQuery Validate插件 – 如何根据各种条件显示不同的错误消息

好的，我知道每个人的第一个想法是简单地创建另一个validation方法和消息。 但这是交易。 我们有一个表单，其中包含一个用作雇主姓名和公司名称的字段，具体取决于下拉列表中选择的内容。

我需要做的是当下拉列表显示他们拥有公司并且他们没有填写该字段然后它显示一条消息。 如果他们不拥有公司并且它是空的，那么它会显示另一条消息。

我怎么做到这一点？ 这是使用最新版本的jQuery和Validate插件（ http://jqueryvalidation.org/ ）。

更新：我在选择下面的选定答案后，向您呈现我最终得到的代码……

http://pastebin.com/iG3Z4BbJ

谢谢，享受！

代码详细信息：

/** * Reference: http://jqueryvalidation.org/rules */ $(document).ready(function() { var rules = { IncomeSource: 'required', NetIncome: { required: true, usDollar: true, minDollars: 1 }, //Begin - Fields that don't always show JobTitle: { //required: true, nameInput: true }, Employer: { //required: true, nameInput: true }, EmployerPhone: { //required: true, phoneUS: true }, BenefitSource: { //required: true, nameInput: true }, //SemiMonthlySpecifics: 'required', //Select one when Semi-Monthly or Monthly are selected //End - Fields that don't always show PayFrequency: 'required', LastPayDate: { required: true, pastDate: true, date: true }, NextPayDate: { required: true, futureDate: true, date: true }, DirectDeposit: 'required', EmploymentLength: 'required', ActiveMilitary: 'required', RoutingNumber: { required: true, digits: true, rangelength: [9, 9] }, AccountNumber: { required: true, digits: true, rangelength: [4, 17] }, AccountType: 'required' }; //And field specific (and even validation type specific) error messages var messages = { IncomeSource: ss.i18n._t('IncomeSourceRequiredError'), NetIncome: { required: ss.i18n._t('NetIncomeRequiredError') }, //Begin - Fields that don't always show JobTitle: { required: ss.i18n._t('JobTitleRequiredError') }, Employer: { required: ss.i18n._t('EmployerRequiredError') }, EmployerPhone: { required: ss.i18n._t('EmployerPhoneRequiredError') }, BenefitSource: { required: ss.i18n._t('BenefitSourceRequiredError') }, SemiMonthlySpecifics: ss.i18n._t('SemiMonthlySpecificsRequiredError'), //Select one when Semi-Monthly or Monthly are selected //End - Fields that don't always show PayFrequency: ss.i18n._t('PayFrequencyRequiredError'), LastPayDate: { required: ss.i18n._t('LastPayDateRequiredError') }, NextPayDate: { required: ss.i18n._t('NextPayDateRequiredError') }, DirectDeposit: ss.i18n._t('DirectDepositRequiredError'), EmploymentLength: ss.i18n._t('EmploymentLengthRequiredError'), ActiveMilitary: ss.i18n._t('ActiveMilitaryRequiredError'), RoutingNumber: { required: ss.i18n._t('RoutingNumberRequiredError') }, AccountNumber: { required: ss.i18n._t('AccountNumberRequiredError') }, AccountType: ss.i18n._t('AccountTypeRequiredError') }; $('#applicationForm').validate({ //debug: true, rules: rules, messages: messages, errorElement: 'span', ignore: '.ignore', onfocusout: function( element, event ) { $(element).valid(); }, invalidHandler: function(event, validator) { kclHelpers.openErrorModal(event, validator); }, errorPlacement: function(error, element) { var insertLocation = kclHelpers.getInsertLocation(element); error.appendTo( insertLocation ); }, success: function(label, element) { element = $(element); var insertLocation = kclHelpers.getInsertLocation(element); insertLocation.hide(); kclHelpers.parentShowSuccess(element, '.control-group'); }, //Had to use this for show/hide of errors because error placement doesn't get called on every error. showErrors: function(errorMap, errorList) { if (this.numberOfInvalids() > 0) { //We want to make sure that we show/hide things appropriately on error $.each(errorList, function(index, item) { var domElement = item['element']; var message = item['message']; var element = $(domElement); var insertLocation = kclHelpers.getInsertLocation(element); insertLocation.show(); kclHelpers.parentShowError(element, '.control-group'); }); } this.defaultShowErrors(); } }); $('[rel=tooltip]').tooltip(); // When the income source is changed, change the form respectively $('#IncomeSource').on('change', kclFinancialInfo.incomeSourceChanged); $('#PayFrequency').on('change', kclFinancialInfo.payFrequencyChanged); }); /** * This is where we specify functions only for this form */ var kclFinancialInfo = function() { return { incomeSourceChanged: function() { // Store and convert the income source to lowercase var val = $(this).val().toLocaleLowerCase(); // Switch on the income source switch (val) { // Case for 'benefits' case 'benefits': // Do not display the employment section kclFinancialInfo.toggleEmploymentSection(false); // Display the benefit source section kclFinancialInfo.toggleBenefitSource(true); break; // Case for 'selfemployment' case 'selfemployment': // Display the benefit source section kclFinancialInfo.toggleBenefitSource(false); // Display the employment section kclFinancialInfo.toggleEmploymentSection(true, "Please enter your company's name"); // Call to update the labels for the employment section based on income source of 'selfemployment' kclFinancialInfo.updateEmploymentSectionLabels('selfemployment'); // Hide the employer phone field kclFinancialInfo.toggleEmployerPhone(true); break; // Case for 'job' and default case 'job': default: // Do not display the benefit source kclFinancialInfo.toggleBenefitSource(false); // Display the employment section kclFinancialInfo.toggleEmploymentSection(true, "Please enter your employer's name"); // Call to update the labels for the employment section based on income source of 'job' kclFinancialInfo.updateEmploymentSectionLabels('job'); // Do not hide the employer phone field kclFinancialInfo.toggleEmployerPhone(false); break; } }, payFrequencyChanged: function() { var val = $(this).val().toLocaleLowerCase(); switch (val) { case 'semi_monthly': // Display the Specific SemiMonthly section kclFinancialInfo.toggleSpecificSemiMonthly(true, val); case 'monthly': // Display the Specific SemiMonthly section BUT change the labels kclFinancialInfo.toggleSpecificSemiMonthly(true, val); break; default: // Do not display the Specific SemiMonthly section kclFinancialInfo.toggleSpecificSemiMonthly(false); break; } }, toggleSpecificSemiMonthly: function(show, value) { if (show) { if (value == 'semimonthly') { $('#specifics-label-for-SemiMonthlySpecifics_day').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SEMI_MONTHLY_SPECIFICS_DAY')); $('#specifics-label-for-SemiMonthlySpecifics_date').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SEMI_MONTHLY_SPECIFICS_DATE')); } else { $('#specifics-label-for-SemiMonthlySpecifics_day').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.MONTHLY_SPECIFICS_DAY')); $('#specifics-label-for-SemiMonthlySpecifics_date').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.MONTHLY_SPECIFICS_DATE')); } $('#semi-monthly-specifics').show().removeClass('hidden'); $('input[name="SemiMonthlySpecifics"]').rules('add', 'required'); } else { kclHelpers.hideMessage('SemiMonthlySpecifics'); $('#semi-monthly-specifics').hide().addClass('hidden'); $('input[name="SemiMonthlySpecifics"]').rules('remove', 'required'); } }, toggleEmployerPhone: function(hide) { // If you want to hide the employer phone field if (hide) { // Hide the employer phone $('#employer_phone').hide().addClass('hidden'); $('employer_phone').rules('remove', 'required'); } // Else (you don't want to hide the employer phone field) else { // Display the employer phone field $('#employer_phone').show().removeClass('hidden'); $('employer_phone').rules('add', 'required'); } }, toggleBenefitSource: function(show) { // If you want to show the benefit sources section if (show) { // Show the benefit source section $('#benefit_source').show().removeClass('hidden'); // Since the benefit source section is now visible, make it required $('#BenefitSource').rules('add', 'required'); /** * Hide the WorkPhone validation message if its displayed (it remains on the screen if the user * selects benefits) */ kclHelpers.hideMessage('WorkPhone'); } // Else (you don't want to show the benefit source section, display the default employment section) else { // Hide the benefit source section $('#benefit_source').hide().addClass('hidden'); // Since the benefit source is now hidden, it is no longer required $('#BenefitSource').rules('remove', 'required'); } }, toggleEmploymentSection: function(show, employerMessage = '') { // If you want to show the employment section if (show) { // Show the employment section $('#employment_section').show(); $('#JobTitle').rules('add', 'required'); $('#Employer').rules('add', { required: true, messages: { required: employerMessage } }); $('#EmployerPhone').rules('add', 'required'); } // Else (you don't want to show the employment section) else { // Hide the employment section $('#employment_section').hide(); $('#JobTitle').rules('remove', 'required'); $('#Employer').rules('remove', 'required'); $('#EmployerPhone').rules('remove', 'required'); } }, updateEmploymentSectionLabels: function(source) { // Switch on the income source (now lowercase) switch (source.toLocaleLowerCase()) { // Case for 'job' case 'job': /** * Make sure the job title and employer labels are correct (this is needed in case the labels * need to be changed back to default */ $('#JobTitle_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.JOB_TITLE')); $('#Employer_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.EMPLOYER')); $('#Employer').attr('placeholder', 'Enter Employer Name'); break; // Case for 'selfemployment' case 'selfemployment': // Change the employer label to correspond to self employment (Employer -> Your Company Name) $('#Employer_label').text(ss.i18n._t('FINANCIAL_INFORMATION_PAGE.SELF_EMPLOYER')); $('#Employer').attr('placeholder', 'Enter Company Name'); break; } } } }(); var kclHelpers = function() { var firstErrorID = ''; var errorCount = 0; return { //Expects jQuery element getInsertLocation: function(element) { var fieldName = element.attr('name'); if (fieldName == 'Reference_1[Relationship]') { fieldName = 'Reference_1-Relationship'; } else if (fieldName == 'Reference_2[Relationship]') { fieldName = 'Reference_2-Relationship'; } var insertTo = "#" + fieldName + "-error"; return $(insertTo); }, //Expects jQuery element and a selector string parentShowError: function(element, parentSelector) { var parentElem = element.parents(parentSelector); if (!parentElem.hasClass('has-error')) { parentElem.addClass('has-error'); } parentElem.removeClass('has-success'); }, //Expects jQuery element and a selector string parentShowSuccess: function(element, parentSelector) { var parentElem = element.parents(parentSelector); if (!parentElem.hasClass('has-success')) { parentElem.addClass('has-success'); } parentElem.removeClass('has-error'); }, hideMessage: function(fieldName) { if (fieldName == 'CreatePassword') { // Clear the Create-Password error message as well as the Confirm-Password error message $('#ConfirmPassword-error').hide(); } if (fieldName == 'CellPhone') { // Clear the Cell-Phone error message as well as the Home-Phone error message $('#HomePhone-error').hide(); } /** * Find the id in the form styling file corresponding to field we wish to "clear" * And set its "display" value to "none", effectively deleting it * This is for the desktop version */ $("#" + fieldName + "-error").hide(); }, openErrorModal: function(event, validator) { var errorCnt = validator.numberOfInvalids(); var errors = ''; var hasSetErrorID = false; kclHelpers.errorCount = errorCnt; if (errorCnt) { var message = ""; for (var i in validator.errorMap) { if (!hasSetErrorID) { hasSetErrorID = true; kclHelpers.firstErrorID = i; } var str = i; var label = ''; if (i == 'AgreeTerms') { label = 'Website terms'; } else if (i == 'ContactTerms') { label = 'Contact terms'; } else if (i == 'HomePhone') { label = 'Home Phone'; } else if (i == 'RoutingNumber') { label = 'Routing Number'; } else if (i == 'AccountNumber') { label = 'Account Number'; } else if (i == 'SemiMonthlySpecifics') { label = 'Pay Frequency Specifics'; } else if (/Reference_1/i.test(str)) { label = 'Reference 1 ' + $("label[for='" + i + "']").text(); } else if (/Reference_2/i.test(str)) { label = 'Reference 2 ' + $("label[for='" + i + "']").text(); } else { label = $("label[for='" + i + "']").text(); } errors += '
' + label + ': ' + validator.errorMap[i] + '
'; } message += '
' + errors + '
'; $('#form-error-modal .modal-body .error-count').text(errorCnt); $('#form-error-modal ul.error-list').html(message); $('#form-error-modal').modal('show'); } } } }(); 

Answer 1

使用.rules('add')方法动态更改select更改时的消息。 然后使用.valid()方法在字段上触发新测试，以便立即更新消息。

 $(document).ready(function () { $('#myform').validate({ rules: { type: { required: true }, theName: { required: true } } }); $('select[name="type"]').on('change', function () { var theMessage, theType = $(this).val(); if (theType == 'employer') { theMessage = "Required Message 1"; } else if (theType == 'company') { theMessage = "Required Message 2"; } else { theMessage = "This field is required."; } // dynamically change the message $('input[name="theName"]').rules('add', { messages: { required: theMessage } }); // trigger immediate validation to update message $('input[name="theName"]').valid(); }); }); 

工作演示： http ： //jsfiddle.net/CLFY9/

Answer 2

这是一种更清洁（也可能是正确的）方式

 messages: { RoutingNumber: { required:"Message1", digits: "Message2", rangelength: "Message 3" } } 

有关更多validation方法： 内置validation方法列表