jquery – 在具有多个部分和未知输入字段的表单上触发验证

我正在尝试验证一个复杂的形式,并且复杂的我认为表单只是一个,但它分为四个部分,我做了一个简单的向导来显示它们.我正在使用 jQuery Validation,但它不能按我的意愿工作,也有一些疑点.根据 this example(第二种形式),我制作了如下代码：

$("#product_create").validate({
    rules: {
        product_name: {
            required: true,minlength: 10,maxlength: 50
        },product_price: {
            required: true,number: true,minlength: 2
        },product_quantity: {
            required: true,digits: true,minlength: 1
        }
    },messages: {
        product_name: {
            required: "El nombre del producto no se puede dejar vacío",minlength: "El nombre del producto no puede tener menos de 10 carácteres",maxlength: "El nombre del producto no puede tener más de 50 carácteres"
        },product_price: {
            required: "Debes introducir un precio",number: "El precio debe ser un número decimal o no"
        },product_quantity: {
            required: "Debes introducir una cantidad",number: "La cantidad debe ser un número"
        }
    }
});

如果我理解良好,那么在keyup事件字段应该验证并且它们不是因为错误没有出现.所以关于这个的第一个问题是：为什么它不验证？我的解决方案有什么问题？第二个是我如何验证product_price和product_quantity它们是否可见？

现在关于同样的话题,我有另一个疑问,我在飞行中创建了几个字段,是的,我每次都知道他们的ID,在这种情况下我是如何将规则应用于这些字段的？

UPDATE

我找出了keyup的问题所在,验证是通过输入名称进行的,而不是输入id,因为我很难,所以这部分完成了.

第二个问题仍未解决.例如,我可以生成三个字段名称变体[pprice] []和苍蝇,但可以是五个或更多或其他,我如何将这些字段添加到规则和验证部分？我可以只添加变体[pprice] []的规则,无论表格中有多少具有相同名称的元素,它都会验证吗？

也正在等待验证字段的部分,只要它们是可见的

更新2

由于变体[pprice] []是一个项目数组,我可以使用$.each来移动它们并分配规则吗？

更新3

根据@Sparky的建议,我将我的代码更改为：

$('#variations_holder input.pprice').each(function() {
    $(this).rules('add',{
        required: true,messages: {
            required: "Debes introducir un precio de la variación",number: "El precio de la variación debe ser un valor numérico o decimal"
        }
    });
});

但在Firebug中我收到此错误：

TypeError: e.validator.methods[o] is undefined

这会阻止脚本的代码执行,在这种情况下我想念的是什么？

更新4

假设我不能使用多个表单,所以我只有一个表单有很多部分(使用section标签),我处理每个表单之间的移动.我试图以相同的形式调用validate()但是两次,并且在第5步验证不起作用,因为字段通过.这是我正在使用的代码：

function validateWizard(step){
var is_valid = true;

switch (step) {
    case 1:
        if ($("#selected_category").val() === '' || $("#selected_category").val().length === 0) {
            alert("Debes seleccionar una categoría antes de continuar");
            is_valid = false;
        }
        break;
    case 2:
        $("#product_create").validate({
            rules: {
                "product[name]": {
                    required: true,maxlength: 50
                },"product[price]": {
                    required: true,minlength: 2
                },"product[quantity]": {
                    required: true,minlength: 1
                },"product[description]": {
                    required: true
                }
            },messages: {
                "product[name]": {
                    required: "El nombre del producto no se puede dejar vacío",maxlength: "El nombre del producto no puede tener más de 50 carácteres"
                },"product[price]": {
                    required: "Debes introducir un precio",number: "El precio debe ser un valor numérico o decimal"
                },"product[quantity]": {
                    required: "Debes introducir una cantidad",number: "La cantidad debe ser un número"
                },"product[description]": {
                    required: "Debes introducir una descripción del producto"
                }
            }
        });

        is_valid = $("#product_create").valid();

        if (is_valid) {
            $('#variations_holder input.pprice').each(function() {
                pprice = $.trim(this.value);
                if (!pprice.length) {
                    $(this).focus();
                    $(this).addClass('error');
                    is_valid = false;
                } else if (!/^[1-9]\d*(\.\d+)?$/.test(pprice)) {
                    $(this).addClass('error');
                    is_valid = false;
                }
            });

            // Validate quantity in variation
            $('#variations_holder input.pqty').each(function() {
                pqty = $.trim(this.value);
                if (!pqty.length) {
                    $(this).focus();
                    $(this).addClass('error');
                    is_valid = false;
                } else if (!/^[1-9]\d*$/.test(pqty)) {
                    $(this).addClass('error');
                    is_valid = false;
                }
            });
        }
        break;
    case 3:
        break;
    case 5:
        $("#product_create").validate({
            rules: {
                "stock[sku]": {
                    required: true,maxlength: 20
                },"stock[width]": {
                    required: true,"stock[height]": {
                    required: true,"stock[length]": {
                    required: true
                },"stock[weight]": {
                    required: true,"stock[description]": {
                    required: true
                },"warranty[description]": {
                    required: true
                },"warranty[valid_time]": {
                    required: true,digits: true
                }
            },messages: {
                "stock[sku]": {
                    required: "El SKU no se puede dejar vacío",minlength: "El SKU no puede tener menos de 10 carácteres",maxlength: "El SKU no puede tener más de 50 carácteres"
                },"stock[width]": {
                    required: "Debes introducir un ancho",number: "El ancho debe ser un número"
                },"stock[height]": {
                    required: "Debes introducir una altura",number: "La altura debe ser un número"
                },"stock[length]": {
                    required: "Debes introducir una longitud",number: "La longitud debe ser un número"
                },"stock[weight]": {
                    required: "Debes introducir un peso",number: "El peso debe ser un número"
                },"stock[description]": {
                    required: "Debes introducir una descripción del stock del producto"
                },"warranty[description]": {
                    required: "Debes introducir una descripción de la garantía para este producto"
                },"warranty[valid_time]": {
                    required: "Debes introducir un período de validez",digits: "El período de validez no es válido"
                },}
        });

        is_valid = $("#product_create").valid();
        break;
}

return is_valid;

}

我的问题是为什么如果表格在第5步无效,它会通过？不应该失败吗？

$('input[name="something"]').each(function() {
    $(this).rules('add',function() {
        required: true,// another rule,etc,});
});

$('input.class').each(function() {
    $(this).rules('add',});
});

$(document).ready(function() {

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

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

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

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

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

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

});