0

我有一个非常大的表格，我以类似向导的方式将其分成四个部分。向导插件（智能向导）具有当前焦点 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;
            }           
        }
    });
4

1 回答 1

2

引用操作：

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

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

要使用 jQuery Validate 插件以编程方式测试表单，请使用触发测试并返回布尔值的.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.

});
于 2013-07-19T16:37:39.220 回答