使用jQuery Validate插件验证表单的子集

My HTML form has a number of divs that are the steps of a wizard. Upon clicking a "next" button I want to validate just the active div. I'm using the jQuery.Validate.js plugin.

我的HTML表单有许多div,它们是向导的步骤。单击“下一步”按钮后,我想验证活动div。我正在使用jQuery.Validate.js插件。

Each div has an ID, so I want a way to say something like:

每个div都有一个ID,所以我想要一种方式来说:

wizardForm.validate().element('#first-step :input')

but this only validates the first input, not all of them. How can I validate all inputs within a div?

但这只能验证第一个输入,而不是所有输入。如何验证div中的所有输入?

3 个解决方案

#1

Taking what jAndy suggested, I created this helper function:

根据jAndy的建议,我创建了这个辅助函数:

jQuery.validator.prototype.subset = function(container) {
    var ok = true;
    var self = this;
    $(container).find(':input').each(function() {
        if (!self.element($(this))) ok = false;
    });
    return ok;
}

usage:

if (wizardForm.validate().subset('#first-step')) {
    // go to next step
}

#2

I tried this solution and it didn't work for me. So here is how i achieved same behaviour, using jquery.validation plugin.

我尝试了这个解决方案,它对我不起作用。所以这是我如何使用jquery.validation插件实现相同的行为。

The validator:

var form = $('#form');

    // init validator obj and set the rules
    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            // the rules, as usual
        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.control-group').addClass('error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element)
                .closest('.control-group').removeClass('error'); // set error class to the control group
        }
    });

Using bootstrap form wizard.

使用bootstrap表单向导。

This is how i validate each step:

这就是我验证每个步骤的方法:

$('#step :input').valid()

Works like a charm.

奇迹般有效。

#3

If you look at the options for the validate() function one of the options is ignore, which by default will prevent the validator from attempting to validate any fields that match the CSS pseudo-class :hidden. I used this in combination with the FuelUX Wizard and was able to prevent the wizard from progressing to the next step with the following:

如果查看validate()函数的选项,其中一个选项是ignore,默认情况下会阻止验证程序尝试验证与CSS伪类匹配的任何字段:hidden。我将它与FuelUX向导结合使用,并且能够阻止向导进入下一步,具体如下:

$( '#wizard' ).wizard().on( 'change', function( event, info ) {
    if ( ! $( '#wizard_form' ).valid() ) event.preventDefault();
});

#1