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

Question

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

用于添加、删除和验证表单字段集的javascript代码的好结构是什么？我在这个站点上搜索了-also --还有许多javascript示例用于添加表单字段集。我喜欢在view-source:http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm中找到的示例，它使用表单模板。但我特别难以理解删除按钮的javascript编码。(在示例中不是这样)

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

<form name="myForm" id="myForm" method="post" action="">
  <input id="name1" name="name1" />
  <input id="email1" name="email1" />
  <input id="phone1" name="phone1" />
  <input type="submit" value="Save">
</form>

Answer 1

我认为你应该给这个表格做模板。也就是说，将它包装在一个函数中，这样您就可以一次又一次地创建它。这里是一个jsfiddle http://jsfiddle.net/krasimir/2sZsx/4/

HTML

<div id="wrapper"></div>
<a href="#" id="add-form">add form</a>

JS

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

Answer 2

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

$('#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将中止提交并将用户返回到文档。

添加/删除表单字段的伟大代码可以在以下问题中找到：https://stackoverflow.com/questions/18520384/removing-dynamically-generated-textboxes-in-jquery

jsFiddle在这里

Answer 3

如果您使用的是KeenThemes (可能是Metronic主题) https://preview.keenthemes.com/good/documentation/forms/formvalidation/advanced.html

你可以这样做。

var form = document.getElementById('form_id');
var validator = FormValidation.formValidation(
  form,
  {
      fields: {
          name: {
              validators: {
                  notEmpty: {
                      message: 'Please enter template name'
                  },
                  stringLength: {
                      min: 3,
                      trim: true,
                      message: 'Please enter a longer  name.'
                  },
              }
          },
          ...
            more fields here
          ...
      },
      plugins: {
          trigger: new FormValidation.plugins.Trigger(),
          bootstrap: new FormValidation.plugins.Bootstrap(),
      },
  });


function addNewFieldDynamically() {
    // add new field here
    ...
    validator.addField('field_name', {
        validators : {...}
    })
}

function removeFieldDynamically() {
    // remove a field here
    ...
    validator.removeField('field_name')
}