我在验证某些动态内容时遇到问题。我最接近发现类似问题的是: jquery-validate-is-not-working-with-dynamic-content
我的表格是基本表格,输入姓名、电子邮件、电话等。但是有一个问题“有多少乘客?”
这是一个选择
,根据您选择的乘客数量,我使用 jQuery 根据此数量创建更多字段:
$('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
});
输出是一个输入
字段,询问其他乘客姓名,以及一个选择
询问他们的食物要求
如何验证这些新创建的元素?这是我到目前为止所拥有的:
$(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
等。
我添加了规则 FullName_0
,但它没有验证,所以我不知道我做错了什么。
注意 - 简化代码以提高可读性
最佳答案
关于javascript - 如何使用 jQuery Validate 插件验证动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25778722/