Question

我正在创建一个Dynamic Form Elements，其中必须添加多个依赖项。
我的代码在下面。

在我的项目中，我必须添加至少一个使用HTML创建的依赖项，但是允许用户添加用户想要的任意数量，因此我为此使用jQuery并动态创建了相同的表单用户按钮单击，用户也可以选择将其删除。

我也已经进行了一些验证，在添加新的依赖项之前，用户必须单击Add Dependant按钮来填写所有字段。此外，在Add Dependant按钮上，我只是使用counter验证先前的表格。

我正在使用一个Counter变量，并检查使用它的最后添加的表单，并在用户创建表单后对其进行递增，而在删除时，我只是对其进行递减。

在Next按钮上，我正在验证整个表单控件，因为用户可能已删除或将任何字段保留为空，因此我在单击下一步按钮时对此进行了检查。

问题是当加起来2个或2个以上的表单，然后我删除中间的一个或第二个表单时，Add Dependant和Next按钮停止做任何事情，这引起了我的问题。我希望用户可以随时添加和删除此表单。

我该如何实现？

var counter = 0;
var regexDoB = new RegExp('([0-9][1-2])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');

$("#btAdd").on('click', function(e) {
  e.preventDefault();

  $('#errorDepFirstName' + counter).html("");
  $('#errorDepLastName' + counter).html("");
  $('#errorDepDateOfBirth' + counter).html("");
  $('#errorDepGender' + counter).html("");
  $('#errorDepRelationship' + counter).html("");

  if ($('#txtDepFirstName' + counter).val() == '') {
    $('#errorDepFirstName' + counter).html("Please provide Dependent's First Name");
    $('#txtDepFirstName' + counter).focus();
    return false;
  } else if ($('#txtDepLastName' + counter).val() == '') {
    $('#errorDepLastName' + counter).html("Please provide Dependent's Last Name");
    $('#txtDepLastName' + counter).focus();
    return false;
  } else if ($('#txtDepDateOfBirth' + counter).val() == '') {
    $('#errorDepDateOfBirth' + counter).html("Please provide Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  } else if (!regexDoB.test($('#txtDepDateOfBirth' + counter).val())) {
    $('#errorDepDateOfBirth' + counter).html("Invalid Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  } else if ($('#ddDepGender' + counter).val() == -1) {
    $('#errorDepGender' + counter).html("Please select Dependent's Gender");
    $('#ddDepGender' + counter).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter).val() == -1) {
    $('#errorDepRelationship' + counter).html("Please select relation with Dependent");
    $('#ddDepRelationship' + counter).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter).val()) > 25) {
    $('#errorDepDateOfBirth' + counter).html("Child Dependent's must be age 25 or younger");
    $('#txtDepDateOfBirth' + counter).focus();
    return false;
  } else {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

function getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

$("#btnNext").on('click', function(e) {
  e.preventDefault();
  for (var j = 0; j <= counter; j++) {
    $('#errorDepFirstName' + j).html("");
    $('#errorDepLastName' + j).html("");
    $('#errorDepDateOfBirth' + j).html("");
    $('#errorDepGender' + j).html("");
    $('#errorDepRelationship' + j).html("");
  }
  flag = true;
  for (var i = 0; i <= counter; i++) {
    if ($('#txtDepFirstName' + i).val() == '') {
      $('#errorDepFirstName' + i).html("Please provide Dependent's First Name");
      $('#txtDepFirstName' + i).focus();
      flag = false;
    } else if ($('#txtDepLastName' + i).val() == '') {
      $('#errorDepLastName' + i).html("Please provide Dependent's Last Name");
      $('#txtDepLastName' + i).focus();
      flag = false;
    } else if ($('#txtDepDateOfBirth' + i).val() == '') {
      $('#errorDepDateOfBirth' + i).html("Please provide Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if (!regexDoB.test($('#txtDepDateOfBirth' + i).val())) {
      $('#errorDepDateOfBirth' + i).html("Invalid Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if ($('#ddDepGender' + i).val() == -1) {
      $('#errorDepGender' + i).html("Please select Dependent's Gender");
      $('#ddDepGender' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == -1) {
      $('#errorDepRelationship' + i).html("Please select relation with Dependent");
      $('#ddDepRelationship' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter).val()) > 25) {
      $('#errorDepDateOfBirth' + i).html("Child Dependent's must be age 25 or younger");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    }
  }
  if (flag == true) {
    alert("No Error Found, Redirecting");
    //submission of data
  }
});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  counter--;
  $(this).parent().parent().remove();
});

function GetDynamicTextBox() {
  counter = counter + 1;

  var div = $("<div />");
  div.attr("class", 'my-3 border border-dark rounded p-3');
  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div />");
  divFormRow.attr("class", "form-row");

  var divRow1Col1 = $("<div />");
  divRow1Col1.attr("class", "form-group col-md-4");
  //FirstName
  var lblDepFName = $("<label />").attr("for", "txtDepFirstName" + counter);
  lblDepFName.attr("class", "font-weight-bold small");
  lblDepFName.html("First Name");

  var txtDepFName = $("<input />").attr("type", "text").attr("name", "DependentFName");
  txtDepFName.attr("placeholder", "First Name").attr("class", "form-control dep-name");
  txtDepFName.attr("id", "txtDepFirstName" + counter)

  var errorDepFName = $('<span />');
  errorDepFName.attr("class", "form-text text-danger small").attr("id", "errorDepFirstName" + counter);

  divRow1Col1.append(lblDepFName);
  divRow1Col1.append(txtDepFName);
  divRow1Col1.append(errorDepFName);

  divFormRow.append(divRow1Col1);


  var divRow1Col2 = $("<div />");
  divRow1Col2.attr("class", "form-group col-md-4");
  //Middle Name
  var lblDepMName = $("<label />").attr("for", "txtDepMiddleName" + counter);
  lblDepMName.attr("class", "font-weight-bold small");
  lblDepMName.html("Middle Name");
  var txtDepMName = $("<input />").attr("type", "text").attr("name", "DependentMName");
  txtDepMName.attr("placeholder", "Middle Name").attr("class", "form-control");
  txtDepMName.attr("id", "txtDepMiddleName" + counter)

  var errorDepMiddleName = $('<span />');
  errorDepMiddleName.attr("class", "form-text text-danger small").attr("id", "errorDepMiddleName" + counter);

  divRow1Col2.append(lblDepMName);
  divRow1Col2.append(txtDepMName);
  divRow1Col2.append(errorDepMiddleName);

  divFormRow.append(divRow1Col2);

  var divRow1Col3 = $("<div />");
  divRow1Col3.attr("class", "form-group col-md-4");
  //Last Name
  var lblDepLName = $("<label />").attr("for", "txtDepLastName" + counter);
  lblDepLName.attr("class", "font-weight-bold small");
  lblDepLName.html("Last Name");
  var txtDepLName = $("<input />").attr("type", "text").attr("name", "DependentLName");
  txtDepLName.attr("placeholder", "Last Name").attr("class", "form-control");
  txtDepLName.attr("id", "txtDepLastName" + counter)

  var errorDepLastName = $('<span />');
  errorDepLastName.attr("class", "form-text text-danger small").attr("id", "errorDepLastName" + counter);

  divRow1Col3.append(lblDepLName);
  divRow1Col3.append(txtDepLName);
  divRow1Col3.append(errorDepLastName);

  divFormRow.append(divRow1Col3);

  var divRow2Col1 = $("<div />");
  divRow2Col1.attr("class", "form-group col-md-4");
  //Date of Birth
  var lblDepDateOfBirth = $("<label />").attr("for", "DepDateOfBirth" + counter);
  lblDepDateOfBirth.attr("class", "font-weight-bold small");
  lblDepDateOfBirth.html('Date of Birth <span class="small">(MM/DD/YYYY)</span>');
  var txtDepDateOfBirth = $("<input />").attr("type", "text").attr("name", "DependentDateOfBirth");
  txtDepDateOfBirth.attr("placeholder", "MM/DD/YYYY").attr("class", "form-control");
  txtDepDateOfBirth.attr("id", "txtDepDateOfBirth" + counter)

  var errorDepDateOfBirth = $('<span />');
  errorDepDateOfBirth.attr("class", "form-text text-danger small").attr("id", "errorDepDateOfBirth" + counter);

  divRow2Col1.append(lblDepDateOfBirth);
  divRow2Col1.append(txtDepDateOfBirth);
  divRow2Col1.append(errorDepDateOfBirth);

  divFormRow.append(divRow2Col1);

  var divRow2Col2 = $("<div />");
  divRow2Col2.attr("class", "form-group col-md-4");
  //Gender
  var lblDepGender = $("<label />").attr("for", "ddDepGender" + counter);
  lblDepGender.attr("class", "font-weight-bold small");
  lblDepGender.html("Gender");
  var ddDepGender = $("<select></select>");
  ddDepGender.attr("name", "DepGender").attr("class", "form-control");
  ddDepGender.attr("id", "ddDepGender" + counter);
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  ddDepGender.append(optnGender);

  var errorDepGender = $('<span />');
  errorDepGender.attr("class", "form-text text-danger small").attr("id", "errorDepGender" + counter);

  divRow2Col2.append(lblDepGender);
  divRow2Col2.append(ddDepGender);
  divRow2Col2.append(errorDepGender);

  divFormRow.append(divRow2Col2);

  var divRow2Col3 = $("<div />");
  divRow2Col3.attr("class", "form-group col-md-4");
  //Relationship
  var lblDepRelationship = $("<label />").attr("for", "ddDepRelationship" + counter);
  lblDepRelationship.attr("class", "font-weight-bold small");
  lblDepRelationship.html("Relationship to Primary Applicant");
  var ddDepRelationship = $("<select></select>");
  ddDepRelationship.attr("name", "DependantRelationship").attr("class", "form-control");
  ddDepRelationship.attr("id", "ddDepRelationship" + counter);
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  ddDepRelationship.append(optnRelationship);

  var errorDepRelationship = $('<span />');
  errorDepRelationship.attr("class", "form-text text-danger small").attr("id", "errorDepRelationship" + counter);

  divRow2Col3.append(lblDepRelationship);
  divRow2Col3.append(ddDepRelationship);
  divRow2Col3.append(errorDepRelationship);

  divFormRow.append(divRow2Col3);
  div.append(header);
  div.append(divFormRow);
  return div;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3">
      <div class="border rounded border-dark p-3">
        <p class="lead font-weight-bold bg-light text-center p-1">
          Dependant Details
        </p>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="txtDepFirstName0" class="small font-weight-bold">
              First Name</label>
            <input type="text" class="form-control dep-name" id="txtDepFirstName0" name="DependentFName" placeholder="First Name" />
            <span id="errorDepFirstName0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepMiddleName0" class="small font-weight-bold">
              Middle Name</label>
            <input type="text" class="form-control" id="txtDepMiddleName0" name="DependentMName" placeholder="Middle Name" />
            <span id="errorDepMiddleName0" class="form-text text-danger"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepLastName0" class="small font-weight-bold">
              Last Name</label>
            <input type="text" class="form-control" id="txtDepLastName0" name="DependentLName" placeholder="Last Name" />
            <span id="errorDepLastName0" class="form-text text-danger small"></span>
          </div>

          <div class="form-group col-md-4">
            <label for="txtDepDateOfBirth0" class="small font-weight-bold">
              Date of Birth <span class="small">(MM/DD/YYYY)</span></label>
            <input type="text" class="form-control" id="txtDepDateOfBirth0" name="DependentDateOfBirth" placeholder="MM/DD/YYYY" />
            <span id="errorDepDateOfBirth0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepGender0" class="small font-weight-bold">
              Gender</label>
            <select id="ddDepGender0" class="form-control" name="DepGender">
              <option value="-1" selected="selected">Select Gender</option>
              <option value="M">Male</option>
              <option value="F">Female</option>
            </select>
            <span id="errorDepGender0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepRelationship0" class="small font-weight-bold">
              Relationship to Primary Applicant</label>
            <select id="ddDepRelationship0" class="form-control" name="DependantRelationship">
              <option value="-1" selected="selected">Select Relationship</option>
              <option value="SP">Spouse or Domestic Partner</option>
              <option value="CH">Child</option>
            </select>
            <span id="errorDepRelationship0" class="form-text text-danger small"></span>
          </div>
        </div>
      </div>
      <!--Textboxes will be added here -->
    </div>


  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary" />
    <br />
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right" />
  </div>
  <asp:Button Text="Save" ID="btnSave" CssClass="btn btn-danger btn-lg mt-5" OnClick="Process" runat="server" />
</div>

在jsFiddle上查看

Answer 1

我认为您的计数器变量有问题。

当您在中间删除表格时，您会递减计数器...但以前的表格仍然与删除之前相同。

为什么不使用Jquery的previous和next函数而不使用计数器？

Answer 2

您在字段的计数器变量和 id 中遇到问题。

基本上，您正在尝试获取不存在的表单。当您添加 2 多余的表单导致输入元素ID为 1,2和3 时会发生这种情况，但是当您删除中间，一个女巫是 2 ，计数器仍在 3 处。因此，当您要验证时，请输入输入 2不存在。女巫停止执行JavaScript。

我通过在 next 元素按钮单击事件的两个循环中添加 if 元素来修复此问题。他们检查元素是否存在，然后尝试访问它。

正如您所提到的。还要删除计数器-删除表单时

var counter = 0;
var regexDoB = new RegExp('([0-9][1-2])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');
var getLastValidId = function(){
  var lastId = $('#TextBoxContainer').children().last().find("input").first().attr("id").match(/\d+/);
  return lastId;
}
$("#btAdd").on('click', function(e) {
  e.preventDefault();
  var counter1 = getLastValidId()
  $('#errorDepFirstName' + counter1).html("");
  $('#errorDepLastName' + counter1).html("");
  $('#errorDepDateOfBirth' + counter1).html("");
  $('#errorDepGender' + counter1).html("");
  $('#errorDepRelationship' + counter1).html("");

  if ($('#txtDepFirstName' + counter1).val() == '') {
    $('#errorDepFirstName' + counter1).html("Please provide Dependent's First Name");
    $('#txtDepFirstName' + counter1).focus();
    return false;
  } else if ($('#txtDepLastName' + counter1).val() == '') {
    $('#errorDepLastName' + counter1).html("Please provide Dependent's Last Name");
    $('#txtDepLastName' + counter1).focus();
    return false;
  } else if ($('#txtDepDateOfBirth' + counter1).val() == '') {
    $('#errorDepDateOfBirth' + counter1).html("Please provide Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter1).focus();
    return false;
  } else if (!regexDoB.test($('#txtDepDateOfBirth' + counter1).val())) {
    $('#errorDepDateOfBirth' + counter1).html("Invalid Dependent's Date of Birth");
    $('#txtDepDateOfBirth' + counter1).focus();
    return false;
  } else if ($('#ddDepGender' + counter1).val() == -1) {
    $('#errorDepGender' + counter1).html("Please select Dependent's Gender");
    $('#ddDepGender' + counter1).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter1).val() == -1) {
    $('#errorDepRelationship' + counter1).html("Please select relation with Dependent");
    $('#ddDepRelationship' + counter1).focus();
    return false;
  } else if ($('#ddDepRelationship' + counter1).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter1).val()) > 25) {
    $('#errorDepDateOfBirth' + counter1).html("Child Dependent's must be age 25 or younger");
    $('#txtDepDateOfBirth' + counter1).focus();
    return false;
  } else {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

function getAge(dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

$("#btnNext").on('click', function(e) {
  e.preventDefault();
  for (var j = 0; j <= counter; j++) {
  if($('#errorDepFirstName' + j).length > 0){
    $('#errorDepFirstName' + j).html("");
    $('#errorDepLastName' + j).html("");
    $('#errorDepDateOfBirth' + j).html("");
    $('#errorDepGender' + j).html("");
    $('#errorDepRelationship' + j).html("");
  }}
  flag = true;
  for (var i = 0; i <= counter; i++) {
  if($('#errorDepFirstName' + i).length > 0){
    if ($('#txtDepFirstName' + i).val() == '') {
      $('#errorDepFirstName' + i).html("Please provide Dependent's First Name");
      $('#txtDepFirstName' + i).focus();
      flag = false;
    } else if ($('#txtDepLastName' + i).val() == '') {
      $('#errorDepLastName' + i).html("Please provide Dependent's Last Name");
      $('#txtDepLastName' + i).focus();
      flag = false;
    } else if ($('#txtDepDateOfBirth' + i).val() == '') {
      $('#errorDepDateOfBirth' + i).html("Please provide Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if (!regexDoB.test($('#txtDepDateOfBirth' + i).val())) {
      $('#errorDepDateOfBirth' + i).html("Invalid Dependent's Date of Birth");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    } else if ($('#ddDepGender' + i).val() == -1) {
      $('#errorDepGender' + i).html("Please select Dependent's Gender");
      $('#ddDepGender' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == -1) {
      $('#errorDepRelationship' + i).html("Please select relation with Dependent");
      $('#ddDepRelationship' + i).focus();
      flag = false;
    } else if ($('#ddDepRelationship' + i).val() == 'CH' && getAge($('#txtDepDateOfBirth' + counter).val()) > 25) {
      $('#errorDepDateOfBirth' + i).html("Child Dependent's must be age 25 or younger");
      $('#txtDepDateOfBirth' + i).focus();
      flag = false;
    }}
  }
  if (flag == true) {
    alert("No Error Found, Redirecting");
    //submission of data
  }
});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();
});

function GetDynamicTextBox() {
  counter = counter + 1;

  var div = $("<div />");
  div.attr("class", 'my-3 border border-dark rounded p-3');
  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div />");
  divFormRow.attr("class", "form-row");

  var divRow1Col1 = $("<div />");
  divRow1Col1.attr("class", "form-group col-md-4");
  //FirstName
  var lblDepFName = $("<label />").attr("for", "txtDepFirstName" + counter);
  lblDepFName.attr("class", "font-weight-bold small");
  lblDepFName.html("First Name");

  var txtDepFName = $("<input />").attr("type", "text").attr("name", "DependentFName");
  txtDepFName.attr("placeholder", "First Name").attr("class", "form-control dep-name");
  txtDepFName.attr("id", "txtDepFirstName" + counter)

  var errorDepFName = $('<span />');
  errorDepFName.attr("class", "form-text text-danger small").attr("id", "errorDepFirstName" + counter);

  divRow1Col1.append(lblDepFName);
  divRow1Col1.append(txtDepFName);
  divRow1Col1.append(errorDepFName);

  divFormRow.append(divRow1Col1);


  var divRow1Col2 = $("<div />");
  divRow1Col2.attr("class", "form-group col-md-4");
  //Middle Name
  var lblDepMName = $("<label />").attr("for", "txtDepMiddleName" + counter);
  lblDepMName.attr("class", "font-weight-bold small");
  lblDepMName.html("Middle Name");
  var txtDepMName = $("<input />").attr("type", "text").attr("name", "DependentMName");
  txtDepMName.attr("placeholder", "Middle Name").attr("class", "form-control");
  txtDepMName.attr("id", "txtDepMiddleName" + counter)

  var errorDepMiddleName = $('<span />');
  errorDepMiddleName.attr("class", "form-text text-danger small").attr("id", "errorDepMiddleName" + counter);

  divRow1Col2.append(lblDepMName);
  divRow1Col2.append(txtDepMName);
  divRow1Col2.append(errorDepMiddleName);

  divFormRow.append(divRow1Col2);

  var divRow1Col3 = $("<div />");
  divRow1Col3.attr("class", "form-group col-md-4");
  //Last Name
  var lblDepLName = $("<label />").attr("for", "txtDepLastName" + counter);
  lblDepLName.attr("class", "font-weight-bold small");
  lblDepLName.html("Last Name");
  var txtDepLName = $("<input />").attr("type", "text").attr("name", "DependentLName");
  txtDepLName.attr("placeholder", "Last Name").attr("class", "form-control");
  txtDepLName.attr("id", "txtDepLastName" + counter)

  var errorDepLastName = $('<span />');
  errorDepLastName.attr("class", "form-text text-danger small").attr("id", "errorDepLastName" + counter);

  divRow1Col3.append(lblDepLName);
  divRow1Col3.append(txtDepLName);
  divRow1Col3.append(errorDepLastName);

  divFormRow.append(divRow1Col3);

  var divRow2Col1 = $("<div />");
  divRow2Col1.attr("class", "form-group col-md-4");
  //Date of Birth
  var lblDepDateOfBirth = $("<label />").attr("for", "DepDateOfBirth" + counter);
  lblDepDateOfBirth.attr("class", "font-weight-bold small");
  lblDepDateOfBirth.html('Date of Birth <span class="small">(MM/DD/YYYY)</span>');
  var txtDepDateOfBirth = $("<input />").attr("type", "text").attr("name", "DependentDateOfBirth");
  txtDepDateOfBirth.attr("placeholder", "MM/DD/YYYY").attr("class", "form-control");
  txtDepDateOfBirth.attr("id", "txtDepDateOfBirth" + counter)

  var errorDepDateOfBirth = $('<span />');
  errorDepDateOfBirth.attr("class", "form-text text-danger small").attr("id", "errorDepDateOfBirth" + counter);

  divRow2Col1.append(lblDepDateOfBirth);
  divRow2Col1.append(txtDepDateOfBirth);
  divRow2Col1.append(errorDepDateOfBirth);

  divFormRow.append(divRow2Col1);

  var divRow2Col2 = $("<div />");
  divRow2Col2.attr("class", "form-group col-md-4");
  //Gender
  var lblDepGender = $("<label />").attr("for", "ddDepGender" + counter);
  lblDepGender.attr("class", "font-weight-bold small");
  lblDepGender.html("Gender");
  var ddDepGender = $("<select></select>");
  ddDepGender.attr("name", "DepGender").attr("class", "form-control");
  ddDepGender.attr("id", "ddDepGender" + counter);
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  ddDepGender.append(optnGender);

  var errorDepGender = $('<span />');
  errorDepGender.attr("class", "form-text text-danger small").attr("id", "errorDepGender" + counter);

  divRow2Col2.append(lblDepGender);
  divRow2Col2.append(ddDepGender);
  divRow2Col2.append(errorDepGender);

  divFormRow.append(divRow2Col2);

  var divRow2Col3 = $("<div />");
  divRow2Col3.attr("class", "form-group col-md-4");
  //Relationship
  var lblDepRelationship = $("<label />").attr("for", "ddDepRelationship" + counter);
  lblDepRelationship.attr("class", "font-weight-bold small");
  lblDepRelationship.html("Relationship to Primary Applicant");
  var ddDepRelationship = $("<select></select>");
  ddDepRelationship.attr("name", "DependantRelationship").attr("class", "form-control");
  ddDepRelationship.attr("id", "ddDepRelationship" + counter);
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  ddDepRelationship.append(optnRelationship);

  var errorDepRelationship = $('<span />');
  errorDepRelationship.attr("class", "form-text text-danger small").attr("id", "errorDepRelationship" + counter);

  divRow2Col3.append(lblDepRelationship);
  divRow2Col3.append(ddDepRelationship);
  divRow2Col3.append(errorDepRelationship);

  divFormRow.append(divRow2Col3);
  div.append(header);
  div.append(divFormRow);
  return div;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3">
      <div class="border rounded border-dark p-3">
        <p class="lead font-weight-bold bg-light text-center p-1">
          Dependant Details
        </p>
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="txtDepFirstName0" class="small font-weight-bold">
              First Name</label>
            <input type="text" class="form-control dep-name" id="txtDepFirstName0" name="DependentFName" placeholder="First Name" />
            <span id="errorDepFirstName0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepMiddleName0" class="small font-weight-bold">
              Middle Name</label>
            <input type="text" class="form-control" id="txtDepMiddleName0" name="DependentMName" placeholder="Middle Name" />
            <span id="errorDepMiddleName0" class="form-text text-danger"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="txtDepLastName0" class="small font-weight-bold">
              Last Name</label>
            <input type="text" class="form-control" id="txtDepLastName0" name="DependentLName" placeholder="Last Name" />
            <span id="errorDepLastName0" class="form-text text-danger small"></span>
          </div>

          <div class="form-group col-md-4">
            <label for="txtDepDateOfBirth0" class="small font-weight-bold">
              Date of Birth <span class="small">(MM/DD/YYYY)</span></label>
            <input type="text" class="form-control" id="txtDepDateOfBirth0" name="DependentDateOfBirth" placeholder="MM/DD/YYYY" />
            <span id="errorDepDateOfBirth0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepGender0" class="small font-weight-bold">
              Gender</label>
            <select id="ddDepGender0" class="form-control" name="DepGender">
              <option value="-1" selected="selected">Select Gender</option>
              <option value="M">Male</option>
              <option value="F">Female</option>
            </select>
            <span id="errorDepGender0" class="form-text text-danger small"></span>
          </div>
          <div class="form-group col-md-4">
            <label for="ddDepRelationship0" class="small font-weight-bold">
              Relationship to Primary Applicant</label>
            <select id="ddDepRelationship0" class="form-control" name="DependantRelationship">
              <option value="-1" selected="selected">Select Relationship</option>
              <option value="SP">Spouse or Domestic Partner</option>
              <option value="CH">Child</option>
            </select>
            <span id="errorDepRelationship0" class="form-text text-danger small"></span>
          </div>
        </div>
      </div>
      <!--Textboxes will be added here -->
    </div>


  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary" />
    <br />
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right" />
  </div>
  <asp:Button Text="Save" ID="btnSave" CssClass="btn btn-danger btn-lg mt-5" OnClick="Process" runat="server" />
</div>
<button onclick="getLastValidId()">A</button>

Answer 3

正如其他人所提到的，在验证时递减counter会抛出ID引用。

我建议使用类而不是ID。然后，您可以遍历每个.form-row，并使用selector context或find()来验证每个块中的输入。像这样：

$('.errorFirstName', this)

这是一个示范：

var counter = 0;
var regexDoB = new RegExp('(0[1-9]|1[012])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');

function validateAll() {

  // set to valid by default, in case no forms exist.
  var valid = true;
  
  // select all form blocks and errors
  var $forms = $('.form-row');
  var $errors = $('.text-danger', $forms);
     
  // clear all errors
  $errors.empty();

  // iterate through all form blocks
  $forms.each(function() {

    // set block to invalid by default
    valid = false;

    // identify errors
    if ($('.inputFirstName', this).val() == '') {
      $('.errorFirstName', this).html("Please provide Dependent's First Name");
      $('.inputFirstName', this).focus();
    } else if ($('.inputLastName', this).val() == '') {
      $('.errorLastName', this).html("Please provide Dependent's Last Name");
      $('.inputLastName', this).focus();
    } else if ($('.inputDOB', this).val() == '') {
      $('.errorDOB', this).html("Please provide Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if (!regexDoB.test($('.inputDOB', this).val())) {
      $('.errorDOB').html("Invalid Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if ($('.inputGender', this).val() == -1) {
      $('.errorGender', this).html("Please select Dependent's Gender");
      $('.inputGender', this).focus();
    } else if ($('.inputRelationship', this).val() == -1) {
      $('.errorRelationship', this).html("Please select relation with Dependent");
      $('.inputRelationship', this).focus();
    } else if ($('.inputRelationship', this).val() == 'CH' && getAge($('.inputDOB', this).val()) > 25) {
      $('.errorDOB', this).html("Child Dependent's must be age 25 or younger");
      $('.inputDOB', this).focus();
    } else {
    
      // set block to valid
      valid = true;
      
    }

    // stop or continue block iteration
    return valid;

  });

  // return validity state
  return valid;

}

function GetDynamicTextBox() {

  var div = $("<div>", {
    'class': 'my-3 border border-dark rounded p-3'
  });

  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div>", {
    "class": "form-row"
  });

  //FirstName
  var divRow1Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepFName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "First Name"
  });
  var txtDepFName = $("<input>", {
    "type": "text",
    "name": "DependentFName",
    "placeholder": "First Name",
    "class": "form-control inputFirstName"
  });
  var errorDepFName = $('<span>', {
    "class": "form-text text-danger small errorFirstName"
  });

  lblDepFName.append(txtDepFName);
  divRow1Col1.append(lblDepFName).append(errorDepFName);
  divFormRow.append(divRow1Col1);

  //Middle Name
  var divRow1Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepMName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Middle Name"
  });
  var txtDepMName = $("<input>", {
    "type": "text",
    "name": "DependentMName",
    "placeholder": "Middle Name",
    "class": "form-control inputMiddleName"
  });
  var errorDepMiddleName = $('<span>', {
    "class": "form-text text-danger small errorMiddleName"
  });

  lblDepMName.append(txtDepMName);
  divRow1Col2.append(lblDepMName).append(errorDepMiddleName);
  divFormRow.append(divRow1Col2);

  //Last Name
  var divRow1Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepLName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Last Name"
  });
  var txtDepLName = $("<input>", {
    "type": "text",
    "name": "DependentLName",
    "placeholder": "Last Name",
    "class": "form-control inputLastName"
  });
  var errorDepLastName = $('<span>', {
    "class": "form-text text-danger small errorLastName"
  });

  lblDepLName.append(txtDepLName);
  divRow1Col3.append(lblDepLName).append(errorDepLastName);
  divFormRow.append(divRow1Col3);

  //Date of Birth
  var divRow2Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepDateOfBirth = $("<label>", {
    "class": "font-weight-bold small",
    "html": 'Date of Birth <span class="small">(MM/DD/YYYY)</span>'
  });
  var txtDepDateOfBirth = $("<input>", {
    "type": "text",
    "name": "DependentDateOfBirth",
    "placeholder": "MM/DD/YYYY",
    "class": "form-control inputDOB"
  });
  var errorDepDateOfBirth = $('<span>', {
    "class": "form-text text-danger small errorDOB"
  });

  lblDepDateOfBirth.append(txtDepDateOfBirth);
  divRow2Col1.append(lblDepDateOfBirth).append(errorDepDateOfBirth);
  divFormRow.append(divRow2Col1);

  //Gender
  var divRow2Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepGender = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Gender"
  });
  var ddDepGender = $("<select>", {
    "name": "DepGender",
    "class": "form-control inputGender"
  });
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  var errorDepGender = $('<span>', {
    "class": "form-text text-danger small errorGender"
  });
  
  ddDepGender.append(optnGender);
  lblDepGender.append(ddDepGender);
  divRow2Col2.append(lblDepGender).append(errorDepGender);
  divFormRow.append(divRow2Col2);

  //Relationship
  var divRow2Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepRelationship = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Relationship to Primary Applicant"
  });
  var ddDepRelationship = $("<select>", {
    "name": "DependantRelationship",
    "class": "form-control inputRelationship"
  });
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  var errorDepRelationship = $('<span>', {
    "class": "form-text text-danger small errorRelationship"
  });

  ddDepRelationship.append(optnRelationship);
  lblDepRelationship.append(ddDepRelationship);
  divRow2Col3.append(lblDepRelationship).append(errorDepRelationship);
  divFormRow.append(divRow2Col3);

  div.append(header);
  div.append(divFormRow);
  return div;

}

function getAge(dateString) {

  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

$("#btAdd").on('click', function(e) {
  e.preventDefault();

  var allValid = validateAll();
  if (allValid) {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

$("#btnNext").on('click', function(e) {
  e.preventDefault();

  var allValid = validateAll();
  if (allValid) {
    alert("No Error Found, Redirecting");
  }

});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  counter--;
  $(this).closest('.my-3').remove();
});

// add initial form block
var div = GetDynamicTextBox();
$("#TextBoxContainer").append(div);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3"></div>
  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary">
    <br>
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right">
  </div>
</div>

我通过将输入和标签和输入嵌套在它们的标签内来隐式关联它们。这使我完全摆脱了counter。如果愿意，可以使用递增的ID（for=""）明确地关联它们。这个想法只是不使用这些ID进行验证迭代。

编辑

以上，我使用“添加按钮”所使用的相同功能从JavaScript生成初始表单块。如果愿意，可以像最初使用HTML一样在HTML中包含初始表单块。

赞：

var counter = 0;
var regexDoB = new RegExp('(0[1-9]|1[012])/([0-2][0-9]|[3][0-1])/((19|20)[0-9]{2})');

function validateAll() {

  // set to valid by default, in case no forms exist.
  var valid = true;

  // select all form blocks and errors
  var $forms = $('.form-row');
  var $errors = $('.text-danger', $forms);

  // clear all errors
  $errors.empty();

  // iterate through all form blocks
  $forms.each(function() {

    // set block to invalid by default
    valid = false;

    // identify errors
    if ($('.inputFirstName', this).val() == '') {
      $('.errorFirstName', this).html("Please provide Dependent's First Name");
      $('.inputFirstName', this).focus();
    } else if ($('.inputLastName', this).val() == '') {
      $('.errorLastName', this).html("Please provide Dependent's Last Name");
      $('.inputLastName', this).focus();
    } else if ($('.inputDOB', this).val() == '') {
      $('.errorDOB', this).html("Please provide Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if (!regexDoB.test($('.inputDOB', this).val())) {
      $('.errorDOB').html("Invalid Dependent's Date of Birth");
      $('.inputDOB', this).focus();
    } else if ($('.inputGender', this).val() == -1) {
      $('.errorGender', this).html("Please select Dependent's Gender");
      $('.inputGender', this).focus();
    } else if ($('.inputRelationship', this).val() == -1) {
      $('.errorRelationship', this).html("Please select relation with Dependent");
      $('.inputRelationship', this).focus();
    } else if ($('.inputRelationship', this).val() == 'CH' && getAge($('.inputDOB', this).val()) > 25) {
      $('.errorDOB', this).html("Child Dependent's must be age 25 or younger");
      $('.inputDOB', this).focus();
    } else {

      // set block to valid
      valid = true;

    }

    // stop or continue block iteration
    return valid;

  });

  // return validity state
  return valid;

}

function GetDynamicTextBox() {

  var div = $("<div>", {
    'class': 'my-3 border border-dark rounded p-3'
  });

  var header = '<p class="lead font-weight-bold bg-light text-center p-1">Dependant Details<button class="removeitem btn btn-link text-danger float-right" type="button"><span class="fas fa-times"></span></button></p>';

  var divFormRow = $("<div>", {
    "class": "form-row"
  });

  //FirstName
  var divRow1Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepFName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "First Name"
  });
  var txtDepFName = $("<input>", {
    "type": "text",
    "name": "DependentFName",
    "placeholder": "First Name",
    "class": "form-control inputFirstName"
  });
  var errorDepFName = $('<span>', {
    "class": "form-text text-danger small errorFirstName"
  });

  lblDepFName.append(txtDepFName);
  divRow1Col1.append(lblDepFName).append(errorDepFName);
  divFormRow.append(divRow1Col1);

  //Middle Name
  var divRow1Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepMName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Middle Name"
  });
  var txtDepMName = $("<input>", {
    "type": "text",
    "name": "DependentMName",
    "placeholder": "Middle Name",
    "class": "form-control inputMiddleName"
  });
  var errorDepMiddleName = $('<span>', {
    "class": "form-text text-danger small errorMiddleName"
  });

  lblDepMName.append(txtDepMName);
  divRow1Col2.append(lblDepMName).append(errorDepMiddleName);
  divFormRow.append(divRow1Col2);

  //Last Name
  var divRow1Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepLName = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Last Name"
  });
  var txtDepLName = $("<input>", {
    "type": "text",
    "name": "DependentLName",
    "placeholder": "Last Name",
    "class": "form-control inputLastName"
  });
  var errorDepLastName = $('<span>', {
    "class": "form-text text-danger small errorLastName"
  });

  lblDepLName.append(txtDepLName);
  divRow1Col3.append(lblDepLName).append(errorDepLastName);
  divFormRow.append(divRow1Col3);

  //Date of Birth
  var divRow2Col1 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepDateOfBirth = $("<label>", {
    "class": "font-weight-bold small",
    "html": 'Date of Birth <span class="small">(MM/DD/YYYY)</span>'
  });
  var txtDepDateOfBirth = $("<input>", {
    "type": "text",
    "name": "DependentDateOfBirth",
    "placeholder": "MM/DD/YYYY",
    "class": "form-control inputDOB"
  });
  var errorDepDateOfBirth = $('<span>', {
    "class": "form-text text-danger small errorDOB"
  });

  lblDepDateOfBirth.append(txtDepDateOfBirth);
  divRow2Col1.append(lblDepDateOfBirth).append(errorDepDateOfBirth);
  divFormRow.append(divRow2Col1);

  //Gender
  var divRow2Col2 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepGender = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Gender"
  });
  var ddDepGender = $("<select>", {
    "name": "DepGender",
    "class": "form-control inputGender"
  });
  var optnGender = $('<option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option>');
  var errorDepGender = $('<span>', {
    "class": "form-text text-danger small errorGender"
  });

  ddDepGender.append(optnGender);
  lblDepGender.append(ddDepGender);
  divRow2Col2.append(lblDepGender).append(errorDepGender);
  divFormRow.append(divRow2Col2);

  //Relationship
  var divRow2Col3 = $("<div>", {
    "class": "form-group col-md-4"
  });
  var lblDepRelationship = $("<label>", {
    "class": "font-weight-bold small",
    "html": "Relationship to Primary Applicant"
  });
  var ddDepRelationship = $("<select>", {
    "name": "DependantRelationship",
    "class": "form-control inputRelationship"
  });
  var optnRelationship = $('<option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option>');
  var errorDepRelationship = $('<span>', {
    "class": "form-text text-danger small errorRelationship"
  });

  ddDepRelationship.append(optnRelationship);
  lblDepRelationship.append(ddDepRelationship);
  divRow2Col3.append(lblDepRelationship).append(errorDepRelationship);
  divFormRow.append(divRow2Col3);

  div.append(header);
  div.append(divFormRow);
  return div;

}

function getAge(dateString) {

  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}

$("#btAdd").on('click', function(e) {
  e.preventDefault();

  var allValid = validateAll();
  if (allValid) {
    var div = GetDynamicTextBox();
    $("#TextBoxContainer").append(div);
  }

});

$("#btnNext").on('click', function(e) {
  e.preventDefault();

  var allValid = validateAll();
  if (allValid) {
    alert("No Error Found, Redirecting");
  }

});

$("body").on("click", ".removeitem", function(e) {
  e.preventDefault();
  counter--;
  $(this).closest('.my-3').remove();
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container mt-4">
  <div id="DependentContainer">
    <div id="TextBoxContainer" class="border rounded border-dark p-3 mb-3">

      <div class="my-3 border border-dark rounded p-3">
        <p class="lead font-weight-bold bg-light text-center p-1">Dependant Details</p>
        <div class="form-row">
          <div class="form-group col-md-4"><label class="font-weight-bold small">First Name<input type="text" name="DependentFName" placeholder="First Name" class="form-control inputFirstName"></label><span class="form-text text-danger small errorFirstName"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Middle Name<input type="text" name="DependentMName" placeholder="Middle Name" class="form-control inputMiddleName"></label><span class="form-text text-danger small errorMiddleName"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Last Name<input type="text" name="DependentLName" placeholder="Last Name" class="form-control inputLastName"></label><span class="form-text text-danger small errorLastName"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Date of Birth <span class="small">(MM/DD/YYYY)</span><input type="text" name="DependentDateOfBirth" placeholder="MM/DD/YYYY" class="form-control inputDOB"></label><span class="form-text text-danger small errorDOB"></span></div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Gender<select name="DepGender" class="form-control inputGender"><option value="-1" selected="selected">Select Gender</option><option value="M">Male</option><option value="F">Female</option></select></label>
            <span class="form-text text-danger small errorGender"></span>
          </div>
          <div class="form-group col-md-4"><label class="font-weight-bold small">Relationship to Primary Applicant<select name="DependantRelationship" class="form-control inputRelationship"><option value="-1" selected="selected">Select Relationship</option><option value="SP">Spouse or Domestic Partner</option><option value="CH">Child</option></select></label>
            <span class="form-text text-danger small errorRelationship"></span>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="form-group text-center mt-3">
    <input type="button" id="btAdd" value="Add Dependant" class="btn btn-primary">
    <br>
    <input type="button" id="btnNext" value="Next" class="btn btn-primary float-right">
  </div>
</div>

动态创建或删除表单元素

3 个答案:

编辑