独立验证表单段

Question

我有一个非常大的表格，我以类似向导的方式将其分成四个部分。向导插件（智能向导）具有当前焦点 avtive 的表单段，而其余 3 个段隐藏在 dom 中。

我正在使用 jquery validate 插件来动态验证表单。问题是验证显示的表单部分。只有当用户移动到下一步时，我才想对表单的该部分运行验证。

有没有办法指定一个元素数组来验证是否触发了验证插件？

在向导插件的 onLeaveStep 选项中，我调用了 validate 插件。天气与否用户点击下一个或上一个验证将被触发。

    var $myform = $("#registeration");
    var validator = $myform.validate({
        errorElement: "span",
        rules: {
            regtype: "required",
            firstname: "required",
            lastname: "required",
            address1: "required",
            city: "required",
            country: "required",
            phone1: "required",                 
            email: {
                 required: true,
                 email: true
            },
            attendees: {
                required: true,
                digits: true
            }
        },
        messages: {
            regtype: "Select an option",
            firstname: "Enter your first name",
            lastname: "Enter your last name",
            address1: "Enter your address",
            city: "Enter your city",
            country: "Enter your country",
            phone1: "Enter your phone number",
            email: "Enter your e-mail",
            attendees: "Enter number of persons attending (including yourself)"
        }               
    });
    // Initialize Smart Wizard      
    $('#wizard').smartWizard({
        transitionEffect:'slide',
        hideButtonsOnDisabled:true,
        transitionEffect: 'fade',
        onLeaveStep: function(){
            if(validator.form()){
                //$myform.trigger('submit');
                return true;
            }else{
                return false;
            }           
        }
    });

Answer 1

引用 OP：

"在向导插件的onLeaveStep选项中，我调用了验证插件。用户是否点击next或previous 验证将被触发”

问题在于.validate() 不是“测试”表单有效性的方法。相反，.validate() 是表单上初始化插件的方法。您将在页面加载时执行 一次，随后对 .validate() 的任何调用都将被忽略。

要使用 jQuery Validate 插件以编程方式测试表单，请使用 the .valid() method 触发测试并返回布尔值。

默认情况下，jQuery Validate 插件也会忽略任何“隐藏”的输入元素。因此，也许您可​​以在使用向导插件时利用此功能。

在您的 DOM 就绪处理程序中...

$('#myform').validate({
   // rules & options
});

在您的向导中...

onLeaveStep: function(){
    $('#myform').valid();
}

否则，当我创建多步骤表单时，我会为每个部分使用一组唯一的 form 标记。然后我使用.valid() 测试该部分，然后再转到下一个部分。 （不要忘记首先初始化插件，在页面完全加载时在每个表单上调用.validate()。）然后在最后一部分，我在所有部分上使用.serialize()，并将每个部分连接成一个数据查询字符串以提交。

这样的……

$(document).ready(function() {

    $('#form1').validate({
        // rules
    });

    $('#form2').validate({
        // rules
    });

    $('#form3').validate({
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    $('#gotoStep2').on('click', function() {
        if ($('#form1').valid()) {
            // code to reveal step 2
        }
    });

    $('#gotoStep3').on('click', function() {
        if ($('#form2').valid()) {
            // code to reveal step 3
        }
    });

    // there is no third click handler since the plugin takes care of this with the
    // built-in submitHandler callback function on the last form.

});