独立验证表单片段

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

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

有没有办法指定元素数组来验证触发的任何验证插件？

在向导插件的 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;
            }           
        }
    });

引用OP：

》在向导插件的onLeaveStep选项中，我调用了validate插件。无论用户是否点击next or previous将触发验证”

问题是.validate()不是“测试”表格有效性的方法。相当，.validate()的方法是初始化表单上的插件。你会做的once页面加载和任何后续调用.validate()被忽略。

要使用 jQuery Validate 插件以编程方式测试表单，您可以使用the .valid() method http://jqueryvalidation.org/valid/它触发测试并返回一个布尔值。

默认情况下，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.

});