如何使用验证插件 jquery 验证输入数组答案

【问题标题】：How to validate array of inputs using validate plugin jquery如何使用验证插件 jquery 验证输入数组
【发布时间】：2014-07-10 07:08:17
【问题描述】：

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

但每次我点击提交时，它只会验证第一个值。其余所有同名值都未验证。请帮忙。

【问题讨论】：

为什么你的输入有相同的名字？我不知道这是否有效，但我认为只有第一个输入会设置 qty[] 名称
这些是使用 ajax 动态生成的，它们也有通用名称，因为在服务器端保存数据很容易。同名不好吗？？
嗯，不确定。但根据我的经验，它不会起作用。试试吧。它只会在名称第一次出现时设置。

标签： jquery jquery-validate

【解决方案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/ 得到了这个解决方案，希望这对某人有所帮助..

【讨论】：

如果您可以显示应该在validate 对象的哪个级别添加checkForm 方法，将会很有帮助。任何 SO 帖子上都没有人显示在哪里添加新方法。
感谢它工作得更好。我需要什么来删除禁用字段的验证
这是一个非常好的解决方案。但是，如果您不想更改 checkForm 另一个解决方案是使用 add 方法并在类输入属性中提供它。示例：$.validator.addMethod("productlabel", function(value, element) {//在这里做验证});然后：
@Amit 谢谢。但是错误信息只打印第一行。
谢谢..!!它正在工作..我们必须记住一件事..即ID must be different for each Field

【解决方案2】：

您可以传递一个选项来忽略部分字段名称；至于原始帖子 cmets，在 HTML 中使用 name[] 样式名称有很多用例，尤其是使用 PHP。

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

【讨论】：

如果我们有单个数组，答案看起来既简单又好，但如果有人有 category['user']['country'] 呢？有没有办法解决这个问题
非常感谢，它拯救了我的一天。

【解决方案3】：

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

另一种让 jQuery 验证插件也检测除第一个之外的所有输入的方法是使名称唯一。所以你可以替换：

<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]" />

【讨论】：

搜索了很多解决方案，在这里找到了 :) 这只对我有用
如何自定义消息只指定一个消息字段 message:{ 'qty[]' : { required : "Please enter qty" } } 上面的代码不起作用
验证怎么样？

【解决方案4】：

这是我找到的最佳解决方案，我目前正在我的项目中使用：

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

【讨论】：

【解决方案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
        }
    },
});

【讨论】：

我可以确认这是一个很好的做法。可以考虑的下一件事是添加唯一 ID，这也是一种解决方案。
我正在使用文件[文件][]。但无法运行

【解决方案6】：

首先，要让 jQuery 区分元素，您需要为每个元素设置不同的 id。这可以在您添加输入时以编程方式完成。然后您需要做的是一次验证所有具有通用名称的输入。为此，使用 addMethod() 函数创建一个自定义验证器，如 in the documentation 所述

jQuery.validator.addMethod("allRequired", function(value, elem){
        // Use the name to get all the inputs and verify them
        var name = elem.name;
        return  $('input[name="'+name+'"]').map(function(i,obj){return $(obj).val();}).get().every(function(v){ return v; });
    });

您可以将其用作数组元素的规则：

$('form').validate(
        {
         rules: { 
               "nbPieces[]": "allRequired"
         },

         submitHandler : function(form, event) {
              event.preventDefault();   
              //... etc
         }
});

为了让错误正确显示在空字段上，您可能需要覆盖 validate...中的 errorPlacement 选项...

【讨论】：

【解决方案7】：

这里是不给数组索引的解决方案。

<form>
    <div>Name:
       <p>
        <input name="name_ct[]" id="id_ct0" type="text" class="form-control" placeholder="Add Variant 1 Name">
        </p>
    </div>
    <input type="button" value="Add Variant" />
    <input type="submit" />
</form>

js 代码

$(document).ready(function () {
 $.validator.addMethod("mytst", function (value, element) {
        var flag = true;

      $("[name^=name_ct]").each(function (i, j) {
                        $(this).parent('p').find('label.error').remove();
$(this).parent('p').find('label.error').remove();                        
                        if ($.trim($(this).val()) == '') {
                            flag = false;

                            $(this).parent('p').append('<label  id="id_ct'+i+'-error" class="error">This field is required.</label>');
                        }
                    });


                    return flag;


    }, "");
$("form").validate({

    ignore: '',
    rules: {
        "name_ct[]": {
            mytst:true
        }
    },
    submitHandler: function () {
        //you can add code here to recombine the variants into one value if you like, before doing a $.post
         form.submit();
        alert('successful submit');
        return false;
    }
});

var j = 1;
$('input[type="button"]').click(function () {
    $('form div').append('<p><input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant ' + j + ' Name " ></p>');

    j++;
});
});

你可以在 js fiddle 中看到： https://jsfiddle.net/q0d76aqx/42/

【讨论】：

【解决方案8】：

我使用了 AsgarAli Khanusiya 提出的解决方案，但 JQuery.Validator 在相同情况下在错误的地方显示带有错误消息的标签。发生这种情况是因为它存储了以前显示的消息。如果用户对集合中的不同项目犯了同样的错误，那么验证器会在之前的位置显示标签，而不是在有问题的元素附近生成新标签。我已经覆盖了 'errorsFor' 方法来解决这个问题：

$.validator.prototype.errorsFor = function (element) {
    var name = this.idOrName(element);
    var elementParent = element.parentElement;
    return this.errors().filter(function() {
        return $(this).attr('for') == name && $(this).parent().is(elementParent);
    });
}

【讨论】：

【解决方案9】：

rules:{
     textname:{
     required:true
     },         
     'checkbox[]':{
      checkbox: true
   }
}

请检查这是非常简单且有效的解决方案

【讨论】：

【解决方案10】：

jQuery Form Validator 是一个功能丰富的多语言 jQuery 插件，可以轻松验证用户输入，同时保持 HTML 标记与 javascript 代码无关。尽管该插件具有广泛的验证功能，但它旨在尽可能少地要求 jQuery 网络流量。这是通过将“模块”中的验证函数组合在一起来实现的，从而可以仅加载验证特定表单所需的那些函数。

<form action="" id="registration-form">
  <p>
    E-mail
    <input name="email" data-validation="email">
  </p>
  <p>
    User name
    <input name="user" data-validation="length alphanumeric" 
         data-validation-length="3-12" 
         data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
  </p>
  <p>
    Password
    <input name="pass_confirmation" data-validation="strength" 
         data-validation-strength="2">
  </p>
  <p>
    Repeat password
    <input name="pass" data-validation="confirmation">
  </p>
  <p>
    Birth date
    <input name="birth" data-validation="birthdate" 
         data-validation-help="yyyy-mm-dd">
  </p>
  <p>
    Country
    <input name="country" id="country" data-validation="country">
  </p>
  <p>
    Profile image
    <input name="image" type="file" data-validation="mime size required" 
         data-validation-allowing="jpg, png" 
         data-validation-max-size="300kb" 
         data-validation-error-msg-required="No image selected">
  </p>
  <p>
    User Presentation (<span id="pres-max-length">100</span> characters left)
    <textarea name="presentation" id="presentation"></textarea>
  </p>
  <p>
    <input type="checkbox" data-validation="required" 
         data-validation-error-msg="You have to agree to our terms">
    I agree to the <a href="..." target="_blank">terms of service</a>
  </p>
  <p>
    <input type="submit" value="Validate">
    <input type="reset" value="Reset form">
  </p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>

  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      $('#country').suggestCountry();
    }
  });

  // Restrict presentation length
  $('#presentation').restrictLength( $('#pres-max-length') );

</script>
...

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。一个正确的解释would greatly improve 它的长期价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。