HTML入力テキストボックスに重複している値がないかどうかを確認し、境界線をペイントしないでください

Question

重複した値とハイライトを持つHTML入力テキストボックス（すべて同じクラスに属する）を検出するJavascript関数を実装しようとしています。それは赤の枠線ですが、正しく動作しません。状況に応じて、入力ボックスのすべてではなく、繰り返し値で塗りつぶします。例として、1番目、3番目、4番目のテキストボックスに繰り返し値が挿入されている場合は、3番目と4番目のテキストボックスのみがペイントされます。しかし、2番目のボックスの値が他の3と同じであれば、すべてのボックスがペイントされます。私はこの問題をどのように乗り越えることができるか知りたい。前もって感謝します！

ここところでJSコードです：

function CheckDuplicates(){ 

       var numbers = []; 

       $('input[class="allinput planrequestnumber"]').each(function(i,e) { 
        numbers.push($(e).attr('id')); 
       }); 

       var duplicatesExist = false; 

       for (var i = 0; i < numbers.length; i++) { 

        var first = '#' + numbers[i]; 
        var second = '#' + numbers[i+1]; 

        if(($(first).val().length == 9) && ($(second).val().length == 9)){ 
         if($(first).val() == $(second).val()){ 
          $(first).css('box-shadow', 'inset 0 0 0 3px red'); 
          $(second).css('box-shadow', 'inset 0 0 0 3px red'); 
          duplicatesExist = true; 
         } 
         else{ 
          $(first).css('box-shadow', ''); 
          $(second).css('box-shadow', ''); 
          duplicatesExist = false; 
         } 
        } 
       } 
       return duplicatesExist; 
      } 

そして、HTMLコード（入力ボックス用）：

<INPUT id="num_principal" runat="server" style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="0" NAME="num_principal"> 

<INPUT id="num_extra_1" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="1" NAME="num_extra_1"> 

<INPUT id="num_extra_2" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="2" NAME="num_extra_2"> 

<INPUT id="num_extra_3" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onkeypress="return isNumberKey(event)" onkeyup=ValPhone(this); onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="3" NAME="num_extra_3"> 

UPDATE：私は私のJSコードにいくつかの微調整をしたが、それは完全にはまだありません機能的。まだ値が繰り返されている場合、テキストボックスがペイントされないケースがあります。

Answer 1

私はちょっときれいにしてコメントを残しておきました。

function CheckDuplicates() { 
 
    var values = []; //Create array where we'll store values 
 

 
    $(".duplicate").removeClass("duplicate"); //Clear all duplicates 
 
    var $inputs = $('input[class="allinput planrequestnumber"]'); //Store all inputs 
 
    
 
    $inputs.each(function() { //Loop through the inputs 
 
    
 
     var v = this.value; 
 
     if (!v) return true; //If no value, skip this input 
 
     
 
     //If this value is a duplicate, get all inputs from our list that 
 
     //have this value, and mark them ALL as duplicates 
 
     if (values.includes(v)) $inputs.filter(function() { return this.value == v }).addClass("duplicate"); 
 
     
 
     values.push(v); //Add the value to our array 
 
    }); 
 
    
 
    return $(".duplicate").length > 0; 
 

 
};

.duplicate { 
 
    box-shadow: inset 0 0 0 3px red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<INPUT id="num_principal" runat="server" style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="0" NAME="num_principal"> 
 

 
<INPUT id="num_extra_1" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="1" NAME="num_extra_1"> 
 

 
<INPUT id="num_extra_2" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="2" NAME="num_extra_2"> 
 

 
<INPUT id="num_extra_3" runat=server style="WIDTH: 135px" class="allinput planrequestnumber" onchange=CheckDuplicates() maxLength=9 placeholder="" data-index="3" NAME="num_extra_3">