我想验证动态创建的表单中的元素。但是,在下面的代码中添加规则('$("#email"+index).rules("add", { required:true,email:true });'
)的代码似乎不起作用(例如,没有响应)。
我做错了什么? (对于这个添加规则代码,我使用了page view-source:http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm作为示例,它确实有效。还在document.ready函数的开头添加了.validate(),例如在添加规则之前在jQuery - How to dynamically add a validation rule中建议,但这不起作用......)
请你的建议......
代码(简化形式):
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script>
<script type="text/javascript" src="/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods-v2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var wrapper = $("#wrapper");
var addForm = $("#add-form");
var index = 0;
$("#myForm").validate();
var getForm = function(index, action) { //returns set of form fields as a string
return $('\
<table>\
<tr>\
<td> Name </td> <td> Email </td> <td> Phone </td>\
</tr>\
<tr>\
<td> <input id="name' + index + '" name="name' + index + '" /></td>\
<td><input id="email' + index + '" name="email' + index + '" /></td>\
<td><input id="phone' + index + '" name="phone' + index + '" /></td>\
<input type="submit" value="Save">\
</tr>\
</table>\
<a href="#" class="remove">remove form</a>\
');
}//getForm()
addForm.on("click", function() {
var form = getForm(++index)
form.find(".remove").on("click", function() {
$(this).parent().remove();
}); //form.find()
$("#wrapper").append(form);
$("#email"+index).rules("add", { required:true,email:true });
}); //addForm.on()
$("#myForm").validate({
//console.log("validate");
errorPlacement: function(error, element) {
error.insertAfter(element);
},
rules: {
email: {
required: true
}
} //rules
}); //validate()
}); //$(document).ready
</script>
</head>
<body>
<form id="myForm" name="myForm" action="" method="post" autocomplete="on">
<div id="wrapper"></div>
<a href="#" id="add-form">add form</a>
</form>
</body>
</html>
答案 0 :(得分:0)
您正在拨打$("#myForm").validate()
两次。一旦没有选项,随后有选项。您只能将其称为一次(初始化),并忽略所有后续调用。
因此,只需删除第二个并将所有选项放入第一个选项。
$(document).ready(function(){
var wrapper = $("#wrapper");
var addForm = $("#add-form");
var index = 0;
$("#myForm").validate({
errorPlacement: function(error, element) {
error.insertAfter(element);
},
rules: {
email: { // <-- does this input exist on DOM ready?
required: true
}
} //rules
}); //validate()
....
但是,如果rules
与input
不存在,则name="email"
声明无效。由于您的form
似乎从零input
元素开始,您需要删除rules
声明......
$("#myForm").validate({
errorPlacement: function(error, element) {
error.insertAfter(element);
}
}); //validate()