如何使用validate plugin jquery验证输入数组

Question

我是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
            }
        },
    });

但每次我点击提交它只验证第一个值.其余所有相同名称的值都未经过验证.请帮忙.

Answer 1

有时我们需要验证输入元素数组:例如 -

<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/得到了这个解决方案,希望这有助于某人...

Answer 2

您可以传递一个选项来忽略字段名称的一部分; 至于原始帖子评论,有很多用例在HTML中使用name []样式名称,特别是使用PHP.

$("#my-form").validate({
  submitHandler: function(form) {
    form.submit();
  },
  ignore: [],
  rules: {
    'category[]': {
      required: true
    }
  }
});

Answer 3

我注意到我使用的jQuery验证插件只会检测具有特定名称的第一个元素.

制作jQuery validate插件的另一种方法是检测除第一个之外的所有输入可以通过使名称唯一.所以你可以替换:

<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />

有:

<input type="text" name="qty[0]" />
<input type="text" name="qty[1]" />
<input type="text" name="qty[2]" />
<input type="text" name="qty[3]" />

Answer 4

这是我找到的最佳解决方案,我目前在我的项目中使用:

// Adding rule to each item in qtyi list 
jQuery('[id^=qty]').each(function(e) {
    jQuery(this).rules('add', {
        minlength: 2,
        required: true
    });
});

Answer 5

您需要为每个元素建立索引

下面是html代码。

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

jquery 代码如下

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