如何使用jQuery Validate插件验证动态内容 [英] How to validate dynamic content using jQuery Validate plugin
问题描述
我在验证某些动态内容时遇到问题.我发现最接近的类似问题的方法是: jquery-validate-is-not-working-with-dynamic-content
I'm having issues validating some dynamic content. The closest I have come to finding a similar problem is this: jquery-validate-is-not-working-with-dynamic-content
我的表单是基本表单,输入姓名,电子邮件,电话等.但是这里有一个问题:有多少位乘客?"
这是一个select
,根据您选择的乘客人数,我使用jQuery根据此数量使用以下内容创建更多字段:
My form is a basic form, enter name, email, phone etc. But there's this question "How many passengers?"
This is a select
and depending on how many passengers you select, I use jQuery to create more fields based on this amount using this:
$('select.travellers').attr('name','Number of travelers').on('click', function() {
var travellers = this.value; //On change, grab value
var dom = "";
for(var i = 0; i < travellers; i++){ //for 0 is less than travellers
dom += '<label>Full Name</label>';
dom += '<input type="text" name="FullName_'+i+'">';
dom += '<label>Food requirements</label>';
dom += '<select size= "0" name="Food Requiries_'+i+'" tabindex="-1" >
<option value="No pork">No pork</option>
<option value="Halal">Halal</option>
<option value="Food allergies">Food allergies</option>
<option value="Other">Other</option></select>';
}
$('.form_Additional').html(dom); //add dom into web page
});
输出是一个input
字段,要求提供其他乘客姓名,以及一个select
要求他们的饮食要求
The output is an input
field asking for the additional passenger name and a select
asking for their food requirements
如何验证这些新创建的元素?这是我到目前为止的内容:
How do I validate these newly created elements? This is what I have so far:
$(document).ready(function(e) {
//validation rule for select
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}, "Value must not equal arg.");
//validate form
$("#FORMOB7DC24203803DC2").on("click", function(event){
$(this).validate({
rules: {
FullName:{
required: true
},
FullName_0:{
required: true
},
'Number of travelers':{
valueNotEquals: "Please select"
}
}
});
});
});
有没有办法使这种动态变化?由于此表格最多可容纳30位乘客,因此我不想手动输入规则FullName_0
,FullName_1
,FullName_2
等.
Is there a way to make this dynamic? Because this form allows for up to 30 passengers and I don't want to manually write in rules FullName_0
, FullName_1
, FullName_2
etc etc.
我添加了规则FullName_0
,该规则未通过验证,因此我不知道自己在做什么错.
I added the rule FullName_0
and it doesn't validate so I don't know what I'm doing wrong.
注意-简化代码以提高可读性
note - simplified code for readability
推荐答案
您可以使用属性添加规则,例如
You can use attributes to add the rules like
dom += '<input type="text" name="FullName_' + i + '" required>';
演示:小提琴
这篇关于如何使用jQuery Validate插件验证动态内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!