Vaildate动态添加数组输入-jQuery Validate
Vaildate dynamic added array inputs - jQuery Validate
下午好,
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}
}
但有了这个,只有第一个字段得到了验证,而不是全部。
假设我添加了5个字段,那么5个字段中的1个是有效的,而不是全部。
此外,我想知道我可以使用PHP和jQueryValidate上传图像吗。});
请在下面找到相关的示例解决方案:
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>
现在的问题是,readymade 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();
}
您的代码中有几个基本问题。首先,您的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/
尝试使用
$.validator.addClassRules("customer", { cRequired: true });
来自文档http://jqueryvalidation.org/reference
- jquery validate 1.8.1”;jQuery"是未定义的错误IE8
- jQuery validate函数不起作用
- jQuery Validate不适用于自定义单选按钮
- Jquery Validate with Coffeescript
- 如何在不提交表单的情况下使用jQuery.validate
- 有条件地创建ajax url参数以与jQuery Validate一起使用
- jQuery Validate - Url Validation
- jQuery.Validate - 如何将错误结果放在不同的地方
- 在应用 jQuery.Selected 时,使用 jQuery.Validate 来验证选择字段时,暴露错误
- 如何使用 jquery.validate with requirejs.
- jQuery Validate-Fire自定义'addMethod'聚焦/按键
- jquery validate-根据条件切换字段集(带有嵌套的必需字段)
- 防止使用jQuery.validate()验证隐藏/禁用字段
- 在附加方法jquery validate中为特殊字符使用regex
- 无法中断jquery.validate回调
- 正在尝试使用.submit在表单提交上激发jquery validate
- jQuery Validate-验证字符串的内容
- Jquery validate:如何验证一组文本框中是否有值
- jQuery Validate 不显示任何消息
- 在jquery.validate()验证表单之前触发函数