验证动态添加的数组输入 - jQuery 验证

Question

下午好，

正在使用 jQuery 添加动态字段，我正在使用 jQuery 验证插件来验证表单。

创建动态字段的代码取决于选择框中所选选项的数量。

$('#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}
  }

但只有第一个字段得到验证，但并非全部。

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

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

Answer 1

请在下面找到相关示例解决方案：

HTML:

<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">
$().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();
}

Answer 2

尝试使用

$.validator.addClassRules("customer", { cRequired: true });

来自文档 http://jqueryvalidation.org/reference

Answer 3

您的代码中有几个基本问题。首先，您的 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/

验证动态添加的数组输入 - jQuery 验证

Vaildate dynamic added array inputs - jQuery Validate

javascript

php

jquery

jquery-validate