検証がコピーされた同じ情報を持っていない

Question

ためにクローン化された入力フィールドは、私は、次のフォーム情報を持っていると述べたことができますあなたは私がdiv class="form_div_0"内部の入力のみをコピーしてい気づくことのよう

<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> 

：私はボタンをクリックした場合の例では、二度のフォームは、このに変更されます。

この情報があると、このルールに従って各入力に入力された値を検証する方法を見つける必要があります。firstnameとlastnameはいつでも等しくない可能性があります。例えば

：私はform_div_0で包まれた入力にFIRSTNAME入力=「ジョン」姓=「ドウ」ならば、私はform_div_1またはform_div_2またはform_div_n同じ値にすることはできません。

私はあなたが私が作成することができます見ることができるように、ここでの入力はまたのみとフォームの例（それは多くの入力やチェックボックス、オプションを選択し、テキストエリアなどの異なる種類の巨大なフォームの）

であることを追加する必要があります

N個のコピー（20までの制限があります）を入力します。

あなたはこの検証を行う方法を知っていましたか？回避策またはライブラリはありますか？何かアドバイス？

入力がフォーカスを失うと（ユーザーが入力を中止したことを意味する）、または送信時に検証が行われる可能性がありますが、最初の選択肢が優先されます。そうしないと、ユーザーはすべてのデータを入力し、この問題のいずれかが発生した場合。

Answer 1

のために働くかどうか、ソリューションの下に確認してください。私は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

それは純粋なJSを使用することにより、単に任意のライブラリせずに次のように私はそれを行う可能性がありますあなた

$(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>