Vaildate动态添加数组输入 - jQuery Validate

时间:2015-11-22 10:05:46

标签: javascript php jquery 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上传图像。     });

2 个答案:

答案 0 :(得分:0)

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

<强> 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();
}

答案 1 :(得分:0)

尝试使用

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

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