Suchen Sie nach doppelten Werten in HTML-Eingabetextfeldern und malen Sie die Rahmen rot funktioniert nicht

Question

Ich versuche eine JavaScript-Funktion zu implementieren, die HTML-Eingabetextfelder mit doppelten Werten erkennen und hervorheben soll Es ist rot umrandet, aber es funktioniert nicht richtig: Es malt nur einige der Eingabefelder mit wiederholten Werten, anstatt alle abhängig von der Situation. Wenn zum Beispiel die ersten, dritten und vierten Textfelder wiederholt Werte enthalten, werden nur die dritten und vierten Textfelder angezeigt. Wenn aber die zweite Box denselben Wert wie die anderen 3 hat, sind alle Boxen bemalt. Ich würde gerne wissen, wie ich dieses Problem umgehen könnte. Danke im Voraus!

Hier ist der JS-Code 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; 
      } 

und HTML-Code (für die Eingabefelder):

<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: Ich habe einige kleinere Verbesserungen an meinem JS-Code gemacht, aber es ist immer noch nicht ganz funktional. Es gibt immer noch Fälle, in denen Textfelder nicht gezeichnet werden, wenn sie wiederholt Werte enthalten.

Answer 1

Ich habe Ihr etwas aufgeräumt und Kommentare hinterlassen, so dass Sie folgen können.

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