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

Question

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

You're comparing each item to the one that immediately follows, but this will only yield the proper results if you've first *sorted* the array. Additionally, you shouldn't have `duplicatesExist = false;` in your else-case, because you're essentially only returning whether or not the *last* item is a duplicate. I'd suggest reading similar questions like **[this one](https://stackoverflow.com/questions/840781/easiest-way-to-find-duplicate-values-in-a-javascript-array)** as a push in the right direction. — Tyler Roper, Jun 12 '17 at 16:46
I updated my original post. I'm still experiencing problems with this. — user3647720, Jun 12 '17 at 17:01
Hm, this is true - the sorting point in your specific case may not be exactly what you need. I'll post an answer. — Tyler Roper, Jun 12 '17 at 17:02

Tyler Roper · Accepted Answer · 2017-06-12T18:04:21.677

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

Oh, just one more thing: it's supposed to return a boolean value at the end depending on if there's duplicates or not. For an extra validation process which will be required further. — user3647720, Jun 12 '17 at 18:00
Just added the return as well. It checks to see if there are any fields that have the class ".duplicate", and if so, it returns true; — Tyler Roper, Jun 12 '17 at 18:04

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

1 Answers1