user3647720 user3647720 -4 years ago 53
HTML Question

Check for duplicate values in HTML input textboxes and paint the borders red not working

I'm trying to implement a Javascript function which is supposed to detect HTML input textboxes (all of them belonging to the same class) with duplicated values and highlight it's borders in red but it's not working properly: it only paints some of the input boxes with repeated values instead of all of them depending on the situation. As an example, if the first, third and fourth textboxes have repeated values inserted in them, only the third and fourth textboxes are painted. But if the second box has that same value as the other 3, all of the boxes are painted. I'd like to know how i could get around this issue. Thanks in advance!

Here's the 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;
}


And HTML code (for the input boxes):

<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: I made some minor tweaks to my JS code but it's still not totally functional. There are still cases of textboxes not being painted when they have repeated values inside.

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 Source

I've cleaned yours up a bit and left comments so you can follow along.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download