如何將jQuery驗證添加到克隆節？

Question

在原始表單部分，驗證工作正常，但克隆表單部分沒有驗證。

當原始部分出現錯誤消息時，添加將提供一個新的克隆表單部分，但重複的錯誤消息。

製作克隆表單部分不能顯示任何錯誤消息，並且它只應驗證其自己的字段。

那麼如何將jQuery驗證單獨添加到克隆節？

/* 
 
\t 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" 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
/* 
 
\t Code for cloning form section. 
 
\t 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 \t \t \t 
 
    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> \t 
 

 
<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 =「可保存格式」，並記住，一個id不應該重複第二表格，你可以將DIV ID =「取值範」 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>