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选项中，我调用了validate插件。无论用户是否点击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. });

独立验证表单段

1 个答案: