Check if all values are unique in a div using jquery

Question

I have select box which no select generates number of textboxes in a div . Now there are three field

display_name[], user_name[], and user_password[]

The code for that is :

<select name="license" id="dropdown" class="form-control" required="required">                                                 
  <option  value="default" >Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<script type="text/javascript">
    $(document).ready(function() {
        $("#dropdown").change(function() {
            var selVal = $(this).val();
            $("#pttuserdiv").html('');
            if(selVal > 0) {
                for(var i = 1; i<= selVal; i++) {
                    $("#pttuserdiv").append(`
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Display Name</label>
                            <input type="text" class="form-control" name="display_name[]" required >
                        </div>
                    </div>
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Username</label>
                            <input type="text" class="form-control validateLocation"  name="user_name[]" id="user_name" required >
                        </div>
                    </div> 
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Password</label>
                            <input type="password" class="form-control" name="user_password[]" required >
                        </div>
                    </div>`);
                }
            }
        });
    });
</script>

<div class="row">
<div id="pttuserdiv">

</div>
</div>

Now I want the user_name[] field to be unique.

How do I do that ? I want to display error or alert if user input same username again in user_name[].

Answer 1

Try the following approach

• Bind keyup event and check user's input for the current input box.
• Check if the current input value is same as other username values
• If yes , then highlight the input box .

Demo

 $(document).ready(function() { $("#dropdown").change(function() { var selVal = $(this).val(); $("#pttuserdiv").html(''); if (selVal > 0) { for (var i = 1; i <= selVal; i++) { $("#pttuserdiv").append('<div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Display Name</label><input type="text" class="form-control" name="display_name[]" required ></div></div><div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Username</label><input type="text" class="form-control validateLocation" name="user_name[]" id="user_name" required ></div></div> <div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Password</label><input type="password" class="form-control" name="user_password[]" required ></div></div>'); } $( "[name='user_name[]']" ).off( "keyup" ); $( "[name='user_name[]']" ).on( "keyup", function(){ var isFound = false; var value = $(this).val(); $( "[name='user_name[]']" ).not(this).each( function(){ if ( this.value == value ) { isFound = true; } }); $(this).toggleClass( "highlight", isFound ); }); } }); }); 

 .highlight { border-color : red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="license" id="dropdown" class="form-control" required="required"> <option value="default" >Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <script type="text/javascript"> </script> <div class="row"> <div id="pttuserdiv"> </div> </div> 

Note - Id doesn't play any role in my code, but as a good practice keep the ids of all elements unique.