如何使用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 validate插件只会检测具有特定名称的第一个元素。

使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

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

awk -F "\t" '(substr($2,5,4)<1997||(substr($2,5,4)==1997 && substr($2,1,2)<=05 && substr($2,3,2)<=17)) {print $1}' <input.txt

Answer 5

首先，让jQuery区分每个元素需要不同id的元素。添加输入时，可以通过编程方式完成此操作。 那么您需要做的是立即验证具有通用名称的所有输入。为此，使用add in the documentation

所述的addMethod（）函数创建自定义验证器

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选项...

Answer 6

您需要为每个元素编制索引

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

Answer 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小提琴： https://jsfiddle.net/q0d76aqx/42/

Answer 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);
    });
}

Answer 9

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

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

Answer 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>
...