好的，我知道这里大家首先想到的就是简单的再创建一个验证方法和消息。但这是交易。我们有一个表单，其中有一个字段用作雇主名称和公司名称，具体取决于在下拉列表中选择的内容。

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

我将如何做到这一点？这是使用最新版本的 jQuery 和验证插件 ( 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 += '<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');
            }
        }
    }
}();

最佳答案

这是一种更简洁(并且可能是正确的)方式

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

更多验证方法:List of built in validation methods

关于javascript - jQuery Validate 插件 - 如何根据各种条件显示不同的错误消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20928470/