我创建了一个JSFiddle 。我动态添加一个包含输入元素的 div(在实际应用程序中有多个字段)。当我单击“提交”时,它仅验证第一个而不是动态添加的 HTML 元素。我确保动态元素具有唯一的 ID。
有什么想法吗?
$('#submit').click(function (e) {
e.preventDefault();
validator = $("#myForm").validate({
rules: {
name: "required"
}
});
$("#myForm").valid();
});
更新:- 我注意到一些奇怪的事情。添加新的输入元素,然后专注于这个新的输入并单击提交后,我可以在 firebug 中看到,jquery 会自动向此输入标记添加一个“class=error”,而不会显示错误消息。如果我尝试向第二个输入写入内容,它会从第一个输入中删除错误消息。
最佳答案
将您的标记更改为此(您的提交按钮位于表单标记之外)
<form id="myForm">
<div id="section">
<input type="text" name="name" class="required"/>
</div>
<input type="button" id="add" value="add" />
<input type="submit" id="submit" value="submit" />
</form>
在你的 jQuery 中你已经有了这个
var count = 0;
$("#myForm").validate();
$('#add').on('click', function () {
var section = $('#section').clone(false).attr('id', function () {
return 'section' + (count);
});
section.find('input').attr('name', function () {
return 'name' + (count);
});
section.find('label').attr('for', function () {
return 'name' + (count);
});
section.insertAfter('#section');
count++;
});
这给了你你所需要的:
- 每个输入都有一个唯一的名称
- 与相应输入字段匹配的标签
关于jquery - 如何使用 jquery validate 验证表单的动态部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16825533/