Question

我正在使用jquery验证插件来验证输入的复杂数组。

HTML表单

<form class="test_frm" action="" method="post" >
    <input class="form-control" type="text" name="rateType[0][type]" />
    <input class="form-control" type="text" name="rateType[0][rate]" />
    <input class="form-control" type="text" name="rateType[0][percent]" />

    <input class="form-control" type="text" name="rateType[1][type]" />
    <input class="form-control" type="text" name="rateType[1][rate]" />
    <input class="form-control" type="text" name="rateType[1][percent]" />

    <input class="form-control" type="text" name="rateType[2][type]" />
    <input class="form-control" type="text" name="rateType[2][rate]" />
    <input class="form-control" type="text" name="rateType[2][percent]" />
</form>

JS代码

$(function () {
    $(".test_frm").validate({
        submitHandler: function (form) {
            form.submit();
        },
        ignore: [],
        rules: {
            'rateType[]': {
                required: true
            }
        }
    });
});

验证我需要的是如果至少输入了一个文本输入应该为真。但是此代码即使适用于简单的数组输入也无法正常工作。如果有人知道该怎么做，将会有很大的帮助。很好，如果它不依赖于[0]或[type] 这样的数组值。

Answer 1

rules: {
    'rateType[]': {  // <- does not match any NAME on the form!
        required: true
    }
}

选项中使用的标识符必须与字段名称匹配。

rules: {
    'rateType[0][type]': {
        required: true
    },
    'rateType[0][rate]': {
        required: true
    },
    'rateType[0][percent]': {
        required: true
    },
    // etc. etc. for every field on the form.
}

由于这很麻烦，因此您可以将the .rules() method与更通用的选择器一起使用，例如“以...开头” 。您需要一个.each()，因为此验证插件不接受包含多个元素的选择。

$("[name^='rateType']").each(function() {
    $(this).rules('add', {
        required: true
    });
});

注意：只有在调用.rules()方法之后，才能调用.validate()方法。

$(function () {

    $(".test_frm").validate({
        submitHandler: function (form) {
            form.submit();
        },
        ignore: [],
    });

    $("[name^='rateType']").each(function() {
        $(this).rules('add', {
            required: true
        });
    });

});

或者，如果您想要HTML解决方案，则只需添加一个内联类或HTML5属性，jQuery Validate插件就会自动选择其中一个。

<input class="form-control" type="text" name="rateType[0][type]" class="required" />

OR

<input class="form-control" type="text" name="rateType[0][type]" required="required" />

使用jquery验证插件来验证输入的复杂数组

1 个答案: