JQuery Validate plugin - How to display various error messages based on various conditions

Question

Well, I know that the first thought here for everyone is to simply create another validation method and message. But here is the deal. We have a form in which there is a field that is used as the name of the artist and the name of the company, depending on what is selected in the drop-down list.

What I need to do is when the drop-down list shows that they belong to the company and they do not fill in the field, and then show one message. If they do not belong to the company and it is empty, then it displays a different message.

How would I do that? This uses the latest jQuery and the Validate plugin ( http://jqueryvalidation.org/ ).

UPDATE: I present to you the code that I finished after selecting the selected answer below ...

http://pastebin.com/iG3Z4BbJ

Thanks and enjoy!

Detailed code:

/** * 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 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 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 += '<li>' + label + ': ' + validator.errorMap[i] + '</li>'; } message += '<ol>' + errors + '</ol>'; $('#form-error-modal .modal-body .error-count').text(errorCnt); $('#form-error-modal ul.error-list').html(message); $('#form-error-modal').modal('show'); } } } }(); 

Answer 1

Use the .rules('add') method to dynamically change the select change message. Then use the .valid() method to run a new test in the field to instantly update the message.

 $(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(); }); }); 

Working DEMO: http://jsfiddle.net/CLFY9/

Answer 2

Here's a much cleaner (and probably correct) way

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

Additional verification methods: List of built-in verification methods