驗證複製|克隆輸入字段不具有相同的信息

Question

讓我們說，我有以下形式的信息：

<form name="form_name" id="form_name" method="post"> 
    <div class="form_div_0"> 
     <label>Firstname</label> 
     <input type="text" name="input_firstname[0]" id="input_firstname[0]" /> 
     <label>Lastname</label> 
     <input type="text" name="input_lastname[0]" id="input_lastname[0]" /> 
    </div> 
    <button id="copy_form">Copy form</button> 
    <input type="submit" value="Submit" /> 
</form> 

複製表單按鈕的功能是創建的表單輸入作爲一個副本例如，如果我兩次單擊按鈕的形式會變成這樣：

<form name="form_name" id="form_name" method="post"> 
    <div class="form_div_0"> 
     <label>Firstname</label> 
     <input type="text" name="input_firstname[0]" id="input_firstname[0]" /> 
     <label>Lastname</label> 
     <input type="text" name="input_lastname[0]" id="input_lastname[0]" /> 
    </div> 
    <div class="form_div_1"> 
     <label>Firstname</label> 
     <input type="text" name="input_firstname[1]" id="input_firstname[1]" /> 
     <label>Lastname</label> 
     <input type="text" name="input_lastname[1]" id="input_lastname[1]" /> 
    </div> 
    <div class="form_div_2"> 
     <label>Firstname</label> 
     <input type="text" name="input_firstname[2]" id="input_firstname[2]" /> 
     <label>Lastname</label> 
     <input type="text" name="input_lastname[2]" id="input_lastname[2]" /> 
    </div> 
    <button id="copy_form">Copy form</button> 
    <input type="submit" value="Submit" /> 
</form> 

正如你可能會注意到，我僅複製div class="form_div_0"內的輸入。

有了這些信息，我需要找到一種方法來驗證在這個規則之後的每個輸入上輸入的值：名字和姓氏在任何時候都不可能相同。

例如：如果我輸入姓名=「約翰」姓氏=「Doe的」上由form_div_0包裹的輸入然後我不能有form_div_1或form_div_2或form_div_n相同的值。

我要補充的是，這裏的投入僅僅是和示例形式的（這是一個巨大的形式與許多輸入和不同類型，如複選框，選項，選擇和textarea的）

此外，你可以看到我可以創建N個副本（它將有一個限制，直到20）的輸入。

您知道一種驗證方法嗎？有沒有解決方法或庫？有什麼建議？

只要輸入失去焦點（意味着用戶停止輸入）或提交，就可以進行驗證，但我更喜歡第一選擇，否則用戶可能正在輸入所有數據，並且我希望它們停止如果有任何這些問題發生。

Answer 1

沒有任何庫如下我可以做它只是通過使用純JS。我使用ES6工具，但如果需要，用它們的ES5替換它們相當簡單。

一旦現場失去焦點，它會立即進行重複檢查。沒有功能分配給提交按鈕，因爲它僅用於提交表單。

function checkOnBlur(e){ 
 
    var enteredValues = inEls.map(inel => inel.value); 
 
     enteredValue = e.currentTarget.value; 
 
    if (enteredValues.filter(ev => ev === enteredValue).length > 1 && enteredValue !== ""){ 
 
    e.currentTarget.value = ""; 
 
    e.currentTarget.setAttribute("placeholder", "Duplicate..! Enter Again."); 
 
    e.currentTarget.focus(); 
 
    } else e.currentTarget.removeAttribute("placeholder"); 
 
} 
 

 
function cloneFormDiv(e){ 
 
    var dl = [...myForm.querySelectorAll("[class*='form_div']")], 
 
    newDiv = dl[0].cloneNode(true), 
 
newInEls = newDiv.querySelectorAll("input"); 
 

 
    e.preventDefault(); 
 
    newDiv.className = "form_div_" + dl.length; 
 
    [newInEls[0].id, newInEls[0].name, newInEls[0].value] = ["input_firstname_" + dl.length, "input_firstname_" + dl.length,""]; 
 
    [newInEls[1].id, newInEls[1].name, newInEls[1].value] = ["input_lastname_" + dl.length, "input_lastname_" + dl.length,""]; 
 
    for(var inel of newInEls) {inel.addEventListener("blur", checkOnBlur); 
 
          inEls.push(inel)} 
 
    myForm.appendChild(dl.concat(newDiv) 
 
         .reduce((frag,d) => (frag.appendChild(d),frag), document.createDocumentFragment())); 
 
} 
 

 
var myForm = document.getElementById("form_name"), 
 
    inEls = [...myForm.querySelectorAll("div input")], 
 
copyButton = myForm.querySelector("#copy_form"); 
 
for (var inel of inEls) inel.addEventListener("blur", checkOnBlur); 
 
copyButton.addEventListener("click", cloneFormDiv);

<form name="form_name" id="form_name"> 
 
    <div class="form_div_0"> 
 
    <label>Firstname</label> 
 
    <input type="text" name="input_firstname_0" id="input_firstname_0" /> 
 
    <label>Lastname</label> 
 
    <input type="text" name="input_lastname_0" id="input_lastname_0" /> 
 
    </div> 
 
    <button id="copy_form">Copy form</button> 
 
    <input type="submit" value="Submit" /> 
 
</form>

Answer 2

請檢查下面的解決方案，它是否適合你

$(function(){ 
 
    $("#copy_form").on('click', function(e) { 
 
     e.preventDefault(); 
 
    \t \t var currentLength = $("[class^='form_div']").length; 
 
     $(".error").html(""); 
 
     if (currentLength > 20) { 
 
     \t $(".error").html("Reaches maximum form limit"); 
 
     return ; 
 
     } 
 
     var previousElement = currentLength-1; 
 
     
 
     var $formDiv = $(".form_div_"+ previousElement); 
 
     var $firstNameLabel = $("<label/>").html("FirstName"); 
 
     var $lastNameLabel = $("<label/>").html("LastName"); 
 
     var $firstName = $("<input/>").attr("type","text").attr("name","input_firstname_"+currentLength).attr("id","input_firstname_"+currentLength); 
 
     var $lastName = $("<input/>").attr("type","text").attr("name","input_lastname_"+currentLength).attr("id","input_lastname_"+currentLength); 
 
    var $nextDiv = $("<div/>").attr("class","form_div_"+ currentLength).append($firstNameLabel).append($firstName).append($lastNameLabel).append($lastName); 
 
    $formDiv.after($nextDiv); 
 
    
 
    }); 
 
    
 
    $("#form_name").submit(function(e) { 
 
     e.preventDefault(); 
 
     var currentLength = $("[class^='form_div']").length; 
 
     var firstNameArray = []; 
 
     var lastNameArray = []; 
 
     for(var i = 0; i < currentLength ; i++) { 
 
      var $firstName = $("#input_firstname_"+i); 
 
      var $lastName = $("#input_lastname_"+i); 
 
      if ($firstName.val() != "" && $lastName.val() != "" && $firstName.val() === $lastName.val()) { 
 
       $(".error").html("First Name and Last Name are same in form" + i); 
 
      } 
 
      if (currentLength > 1) { 
 
       if ($firstName.val() != "") { 
 
      \t \t if ($.inArray($firstName.val(),firstNameArray) == -1) { 
 
      \t \t \t firstNameArray.push($firstName.val()); 
 
       }  
 
       else {  
 
        $(".error").append("Duplicate firstName in form" + i); 
 
       } 
 
       } 
 
\t \t \t \t \t \t \t 
 
       if ($lastName.val() != "") { 
 
       if ($.inArray($lastName.val(),lastNameArray) == -1) {   \t \t \t             lastNameArray.push($lastName.val()); 
 
       } 
 
       else {  
 
        $(".error").append("Duplicate lastName in form" + i); 
 
       } 
 
      } 
 
      } 
 
       
 
       
 
     } 
 
     
 
     
 
    }); 
 
    
 
});

.error { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form_name" id="form_name" method="post"> 
 

 
<span class="error"></span> 
 
    <div class="form_div_0"> 
 
     <label>Firstname</label> 
 
     <input type="text" name="input_firstname[0]" id="input_firstname_0" /> 
 
     <label>Lastname</label> 
 
     <input type="text" name="input_lastname[0]" id="input_lastname_0" /> 
 
    </div> 
 
    <button id="copy_form">Copy form</button> 
 
    <input type="submit" value="Submit" /> 
 
</form>