Javascript 动态添加、验证和删除表单字段集

我想创建一个网页，用户可以通过一个“添加”按钮和一个“删除”按钮添加和删除与要删除的集合相关的表单字段集。输入的值将通过jquery validate进行检查，并为其动态添加规则。请参见下面我的目标表格的简化示例：

用于添加、删除和验证表单字段集的javascript代码的良好结构是什么？我在谷歌上搜索过——也在这个网站上——有许多javascript示例用于添加表单字段集。我喜欢在view source:中找到的示例，它使用表单模板。但是我特别为删除按钮的javascript编码而挣扎（示例中没有）

我的目标（简化）表单（包含1组3个表单字段的模板）：

---

我认为你应该给表格做模板。也就是说，把它包装在一个函数中，这样你就可以一次又一次地创建它。这是一个jsfiddle

HTML

JS

var wrapper=$（“#wrapper”）；
var addForm=$（“#add form”）；
var指数=0；
var getForm=函数（索引、操作）{
返回$（'\
\
\
\
\
\
\
\
');
}
addForm.on（“单击”，函数（）{
var form=getForm（++索引）；
form.find（“.remove”）。在（“单击”，函数（）{
$（this.parent（）.remove（）；
});
附加（形式）；
});

我认为你应该给表格做模板。也就是说，把它包装在一个函数中，这样你就可以一次又一次地创建它。这是一个jsfiddle

HTML

JS

var wrapper=$（“#wrapper”）；
var addForm=$（“#add form”）；
var指数=0；
var getForm=函数（索引、操作）{
返回$（'\
\
\
\
\
\
\
\
');
}
addForm.on（“单击”，函数（）{
var form=getForm（++索引）；
form.find（“.remove”）。在（“单击”，函数（）{
$（this.parent（）.remove（）；
});
附加（形式）；
});

提交表单时可以进行简单的验证，因此：

$('#myForm').submit({
    var n1 = $('#name1').val();
    var e1 = $('#email1').val();
    var p1 = $('#phone1').val();

    if (n1=='' || e1=='' || p1=='') {
        alert('Please complete all fields');
        return false;
    }
});

请注意，

return false

将中止提交并将用户返回文档

---

在这个问题中可以找到添加/删除表单字段的优秀代码：

---

提交表单时可以进行简单的验证，因此：

$('#myForm').submit({
    var n1 = $('#name1').val();
    var e1 = $('#email1').val();
    var p1 = $('#phone1').val();

    if (n1=='' || e1=='' || p1=='') {
        alert('Please complete all fields');
        return false;
    }
});

请注意，

return false

将中止提交并将用户返回文档

---

在这个问题中可以找到添加/删除表单字段的优秀代码：

---

thnx，非常有用（！）从您的示例中，我注意到我没有清楚地描述我的上下文，因为各种表单集应该在一个表单中（使用一个保存按钮）。但我可以从你的例子中得出结论。可以在addFormonClick函数中添加jquery验证规则，对吗？是的，没错。您可以使用相同的方法将更多事件附加到表单并实际编写验证。thnx。我的验证代码还不正确。我在'wrapper.append（form）；'下面添加了“$”（“#email”+index）.rules（“添加”，{required:true，email:true}）；”语句，然后在addForm函数下面添加validate（）函数。知道会出什么问题吗？一旦用户提交表单，就应该进行验证。那么你是在做还是…thnx，非常有用（！）从你的例子中我注意到我没有清楚地描述我的上下文，因为各种表单集应该在一个表单中（使用一个保存按钮）。但我可以从你的例子中得出结论。可以在addFormonClick函数中添加jquery验证规则，对吗？是的，没错。您可以使用相同的方法将更多事件附加到表单并实际编写验证。thnx。我的验证代码还不正确。我在'wrapper.append（form）；'下面添加了“$”（“#email”+index）.rules（“添加”，{required:true，email:true}）；”语句，然后在addForm函数下面添加validate（）函数。知道会出什么问题吗？一旦用户提交表单，就应该进行验证。那你是在做还是。。。

var wrapper = $("#wrapper");
var addForm = $("#add-form");
var index = 0;

var getForm = function(index, action) {
    return $('\
        <form name="myForm" id="myForm" method="post" action="' + action + '">\
          <input id="name' + index + '" name="name' + index + '" />\
          <input id="email' + index + '" name="email' + index + '" />\
          <input id="phone' + index + '" name="phone' + index + '" />\
          <input type="submit" value="Save">\
          <a href="#" class="remove">remove form</a>\
        </form>\
    ');
}

addForm.on("click", function() {
    var form = getForm(++index);
    form.find(".remove").on("click", function() {
       $(this).parent().remove();
    });
    wrapper.append(form);
});

$('#myForm').submit({
    var n1 = $('#name1').val();
    var e1 = $('#email1').val();
    var p1 = $('#phone1').val();

    if (n1=='' || e1=='' || p1=='') {
        alert('Please complete all fields');
        return false;
    }
});