如何使用 jquery validate 验证表单的动态部分答案

【问题标题】：How to validate dynamic sections of form using jquery validate如何使用 jquery validate 验证表单的动态部分
【发布时间】：2013-05-29 23:23:27
【问题描述】：

我创建了一个JSFiddle。我正在动态添加一个包含输入元素的 div（在实际应用中，有多个字段）。当我单击提交时，它只是验证第一个而不是动态添加的 HTML 元素。我确保动态元素具有唯一的 ID。

有什么想法吗？

$('#submit').click(function (e) {    
    e.preventDefault();
    validator = $("#myForm").validate({
        rules: {
            name: "required"
        }
    });
    $("#myForm").valid();
});

更新：- 我注意到了一些奇怪的东西。在我添加一个新的输入元素，然后专注于这个新的输入并单击提交后，我可以在 firebug 中看到，jquery 会自动向这个输入标签添加一个“class=error”，而不会显示错误消息。如果我尝试向第二个输入写入内容，它会从第一个输入中删除错误消息。

【问题讨论】：

我正在使用 jquery 2.0 和 jquery validate 1.11.1
您不应有两个具有相同name 的文本输入。该值应该是唯一的。您的验证规则将仅匹配第一次出现的 name=name。
将此小提琴视为在验证规则中使用不同值与不同输入名称配对的示例：jsfiddle.net/h4VuD
嗯，我认为只有 id 必须是唯一的，而不是任何其他属性？这不是插件的错误/错误实现吗？但在我的情况下，我可以添加多个输入标签，我不能完全按照你的方法来做，因为我不会提前知道 id。我是否必须“动态”添加规则，$('[name=fname]').rules("add", "required") 还是有更好的方法？
这不是错误。文档明确指出，每个输入都必须包含 name 属性才能使插件正常运行。如果所有内容都相同，则此约束将没有逻辑意义。

标签： jquery validation jquery-validate

【解决方案1】：

将您的标记更改为此（您的提交按钮在表单标签之外）

<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++;
});

这可以满足您的需要：

每个输入都有一个唯一的名称
与相应输入字段匹配的标签

updated fiddle here

【讨论】：

谢谢。在@TravisJ 提到name 属性之后，我能够找出解决方案。如果他不将其转换为答案，我会将您的标记为答案。无论如何 +1 以获得比我的“更清洁”的实现。