檢查HTML輸入文本框中的重複值，並繪製邊框紅色不起作用

Question

我試圖實現一個Javascript函數，它應該檢測HTML輸入文本框（它們都屬於同一個類），具有重複值和高亮它的邊界是紅色的，但它不能正常工作：它只是根據情況繪製一些具有重複值的輸入框，而不是全部。例如，如果第一個，第三個和第四個文本框中插入重複值，則只繪製第三個和第四個文本框。但是如果第二個盒子和其他盒子有相同的值，那麼所有的盒子都被繪製。我想知道如何解決這個問題。提前致謝！

這裏的JS代碼BTW：

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

更新：我做了一些小的調整，我的JS代碼，但它仍然沒有完全功能。還有一些文本框在內部重複值時沒有被繪製。

function CheckDuplicates(){ 

        var numbers = []; 

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

        var sortedNum = numbers.slice().sort(); 

        var duplicatesExist = false; 

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

         var first = '#' + sortedNum[i]; 
         var second = '#' + sortedNum[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', ''); 
          } 
         } 
        } 
        return duplicatesExist; 
       } 

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