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

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

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

我怎么做到这一点？这是使用最新版本的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');
            }
        }
    }
}();

stuartdotnet.. 13

这是一种更清洁(也可能是正确的)方式

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

有关更多验证方法:内置验证方法列表