如何将 jQuery 验证添加到克隆的部分？

Question

在原始表单部分，验证工作正常，但克隆的表单部分没有验证。

当原始部分有错误消息时，添加将给出一个新的克隆表单部分，但带有重复的错误消息。

制作克隆的表单部分不得显示任何错误消息，并且应该只验证自己的字段。

那么如何将 jQuery 验证分别添加到克隆的部分？

/*
	jQuery validation: https://jqueryvalidation.org/
*/
$("#aform").validate({
  rules: {
    fullname: {
      required: true
    }
  },
  messages: {
    fullname: {
      required: "Please enter your Full Name."
    }
  }
});

function addval2() {
  $("#aform").validate({
    rules: {
      fullname_2: {
        required: true
      }
    },
    messages: {
      fullname_2: {
        required: "Please enter your Full Name.2"
      }
    }
  });
}

/*
	Code for cloning form section.
	Plugin repo: https://github.com/tristandenyer/Clone-section-of-form-using-jQuery
*/
$(function() {
  $('#btnAdd').click(function() {
    var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
      newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
      newElem = $('#entry' + num).clone(false).attr('id', 'entry' + newNum).hide().fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value

    // New attributes (id, class, name) for cloned inputs			
    newElem.find('.fullname')
      .attr('id', 'fullname_' + newNum)
      .attr('class', 'fullname_' + newNum)
      .attr('name', 'fullname_' + newNum).val('');

    newElem.find('.error').remove();

    // Add validation for cloned sections.
    addval2();

    // Insert the new element after the last "duplicatable" input field
    $('#entry' + num).after(newElem);

    // Enable the "remove" button. This only shows once you have a duplicated section.
    $('#btnDel').attr("style", "visibility: true");

    // Max form sections, including the original.
    if (newNum == 2)
      $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached  
  });

  $('#btnDel').click(function() {
    var num = $('.clonedInput').length;
    // how many "duplicatable" input fields we currently have
    $('#entry' + num).slideUp('slow', function() {
      $(this).remove();
      // if only one element remains, disable the "remove" button
      if (num - 1 === 1)
        $('#btnDel').attr("style", "visibility: hidden");
      // enable the "add" button
      $('#btnAdd').attr('disabled', false).prop('value', "add section");
    });
    return false; // Removes the last section you added
  });

  // Enable the "add" button
  $('#btnAdd').attr('disabled', false);
  // Disable the "remove" button
  $('#btnDel').attr("style", "visibility: hidden");
});

<h1>jQuery validation and cloning form sections</h1>	

<div id="entry1" class="clonedInput">
  <h2>Form</h2>
  <form id="aform" class="aform" name="aform" method="get">
    <div>
      <label for="fullname">Full Name</label>
      <input id="fullname" class="fullname" name="fullname" minlength="2" required>
    </div>
  </form>
</div>

<p>
  <button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">add section</button>
  <button type="button" id="btnDel" name="btnDel" class="btn btn-danger">remove section above</button>
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

Answer 1

问题可能是您使用 id = "aform" 创建了第二个表单并记住不应重复 id，您可以将 div id = "entry1" class= "clonedInput" 放在表单内，这样创建的两个字段在一个表单中。

试试这个

<h1>jQuery validation and cloning form sections</h1>    
<form id="aform" class="aform" name="aform" method="get">

<div id="entry1" class="clonedInput">   
<h2>Form</h2>
      <label for="fullname">Full Name</label>
      <input id="fullname" class="fullname" name="fullname" minlength="2" required>
 </div>
</form>
<p>
<button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">add section</button>
<button type="button" id="btnDel" name="btnDel" class="btn btn-danger">remove section above</button>
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

<script>

$("#aform").validate({
rules: {
fullname: {
  required: true
}
},
messages: {
fullname: {
  required: "Please enter your Full Name."
}
}
});

/*
Code for cloning form section.
Plugin repo: https://github.com/tristandenyer/Clone-section-of-form-using-jQuery
*/
$(function() {
  $('#btnAdd').click(function() {
    var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
    newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
    newElem = $('#entry' + num).clone(false).attr('id', 'entry' + newNum).hide().fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value

   // New attributes (id, class, name) for cloned inputs            
   newElem.find('.fullname')
  .attr('id', 'fullname_' + newNum)
  .attr('class', 'fullname_' + newNum)
  .attr('name', 'fullname_' + newNum).val('');

   newElem.find('.error').remove();


// Insert the new element after the last "duplicatable" input field
$('#entry' + num).after(newElem);

// Enable the "remove" button. This only shows once you have a duplicated section.
$('#btnDel').attr("style", "visibility: true");

// Max form sections, including the original.
if (newNum == 2)
     $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached  
 });

 $('#btnDel').click(function() {
    var num = $('.clonedInput').length;
    // how many "duplicatable" input fields we currently have
    $('#entry' + num).slideUp('slow', function() {
      $(this).remove();
      // if only one element remains, disable the "remove" button
     if (num - 1 === 1)
       $('#btnDel').attr("style", "visibility: hidden");
      // enable the "add" button
      $('#btnAdd').attr('disabled', false).prop('value', "add section");
    });
    return false; // Removes the last section you added
  });

 // Enable the "add" button
 $('#btnAdd').attr('disabled', false);
 // Disable the "remove" button
 $('#btnDel').attr("style", "visibility: hidden");
});

</script>