Vaildate动态添加的数组输入-jQuery验证 [英] Vaildate dynamic added array inputs - jQuery Validate

问题描述

下午好，

动态字段与jQuery一起添加，我正在使用jQuery Validate插件来验证表单.

用于创建动态字段的代码取决于selectbox中所选选项的数量.

$('#ids_noct').on('change', function() {
  var tsd = ( this.value );
  for(var j=1; j <= tsd; j++) {
     $("#t").append("<input name="name_ct[]" id="id_ct' + j + '" type="text" 
   class="form-control" placeholder="Add Variant' + j + ' Name" >");
  }
});

要验证的jQuery代码:

$("#formsx").validate({
  rules: {
    "name_ct[]": {required: true}
  }

但是只有这一个第一"字段才得到验证.

假设我添加了5个字段，那么5个中的1个是有效的，不是全部.

此外，我想知道我可以使用PHP和jQuery Validate上传图像. });

解决方案

您的代码中有几个基本问​​题.首先，您的append调用未正确设置引号-您不能以双引号开头，然后在其中加双引号，这将引发错误.因此，您的通话应该看起来像这样:

$("#t").append('<input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');

第二，您不能输入具有相同名称属性的文本类型的输入.因此，如果您有5个name_ct输入，则每个输入都需要有自己的名称:

$("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');

最后，在调用$.validate之后添加新字段时，还必须更新该规则:

$('#ids_noct').on('change', function() {
  var tsd = ( this.value );
  for(var j=1; j <= tsd; j++) {
     $("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');
     $('#id_ct'+j).rules('add',{
       required:true
     });
  }
});

不知道这些name_ct值到底要做什么，我不能说应该如何重新组合它们，但是在$ .validate的submitHandler中，您可以更改所需的数据，然后再执行$.post.

在此处查看其工作方式: http://jsfiddle.net/ryleyb/6syqa60d/

Good Afternoon,

Dynamic Fields are being added with jQuery and i am using jQuery Validate plugin to validate form.

Code to create dynamic fields depend on number of selected options from selectbox.

$('#ids_noct').on('change', function() {
  var tsd = ( this.value );
  for(var j=1; j <= tsd; j++) {
     $("#t").append("<input name="name_ct[]" id="id_ct' + j + '" type="text" 
   class="form-control" placeholder="Add Variant' + j + ' Name" >");
  }
});

jQuery code to validate:

$("#formsx").validate({
  rules: {
    "name_ct[]": {required: true}
  }

But with this only First field is getting validated not all.

Suppose if i have added 5 fields then 1 out of 5 is validates, not all.

Also, i want to know that can i upload image using PHP and jQuery Validate. });

解决方案

You have a couple basic problems in your code. First, your append call doesn't have it's quotes set correctly - you can't start with a double quote and then include double quotes inside of it, it will throw an error. So, your call should look more like this:

$("#t").append('<input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');

Secondly, you can't have inputs of type text with the same name attribute. So if you have 5 of these name_ct inputs, they each need to have their own name:

$("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');

Finally, when you add a new field after $.validate has been called, you must also update the rules for it:

$('#ids_noct').on('change', function() {
  var tsd = ( this.value );
  for(var j=1; j <= tsd; j++) {
     $("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');
     $('#id_ct'+j).rules('add',{
       required:true
     });
  }
});

Not knowing what exactly you want to do with these name_ct values, I can't say how you should recombine them, but in the submitHandler of $.validate, you can change the data however you need before doing a $.post.

See it working here: http://jsfiddle.net/ryleyb/6syqa60d/

这篇关于Vaildate动态添加的数组输入-jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！