如何使用验证插件jQuery来验证输入数组

Amit 发表于 Dev

阿米特

是jquery验证插件的新手，但我想知道我们如何使用验证插件来验证输入框数组。

以下是html代码。

<form id="transport-form">
  <input type="text" name="qty[]" id="qty1">
  <input type="text" name="qty[]" id="qty2" >
  <input type="text" name="qty[]" id="qty3">
  <input type="text" name="qty[]" id="qty4">
  <input type="submit value="submit">
</form>

并且jQuery代码在下面

jQuery("#transport-form").validate({
        rules: {
            'qty[]': {
                required: true
            }
        },
    });

但是，每当我单击提交时，它仅验证第一个值。其余所有同名值均未通过验证。请帮忙。

阿米特

有时我们需要验证一组输入元素：例如–

<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
    <select name="category[]" id="cat_1">
    <option value="">Select One</option>
    <option value="1">aa</option>
    <option value="2">bb</option>
    <option value="3">cc</option>
    <option value="4">dd</option>
    </select>

    <select name="category[]" id="cat_2">
    <option value="">Select One</option>
    <option value="5">ee</option>
    <option value="6">ff</option>
    <option value="7">gg</option>
    <option value="8">hh</option>
    </select>

    <select name="category[]" id="cat_3">
    <option value="">Select One</option>
    <option value="9">ii</option>
    <option value="10">jj</option>
    <option value="11">kk</option>
    <option value="12">ll</option>
    </select>

    <input class="submit" type="submit" value="Submit">
    </form>

现在，我们将使用jquery验证插件jquery.validate.js来验证表单。条件是用户必须从每个下拉菜单中选择类别。验证脚本如下所示-

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    // validate the comment form when it is submitted
    $("#signupForm").validate({
        rules: {
            "category[]": "required"
        },
        messages: {
            "category[]": "Please select category",
        }
    });
});
</script>

现在的问题是，现成的jquery.validate.js仅验证category []的第一个元素。因此，我们需要对其进行一些修改。

在jquery.validate.js中，我们可以找到一个名为checkForm的函数，我们必须对其进行如下修改：

checkForm: function() {
    this.prepareForm();
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
        if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
            for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
                this.check(this.findByName(elements[i].name)[cnt]);
            }
        } else {
            this.check(elements[i]);
        }
    }
    return this.valid();
}

我刚刚从http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/获得了此解决方案，希望对您有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。