featured Image - Check For duplicate values in input fields

Check For Duplicate Values In Input Fields Using Jquery

Hello amigos, hope you all are doing great. In this post, we will learn how to check for duplicate values in input fields using a simple HTML form and simple jquery code. Many a time our business requires users to set let's say security questions to make your account more secure and help during the recovery in case of an account locked out scenario. However, a condition is that user should not enter duplicate answers to the security questions. Now to understand why this condition is kept while setting your security questions is that, in case you leak one of your answers still you will be secured as you will have answers to other questions that are unique. So, now that we have understood why this condition is implemented let us look at how to check for duplicate values in input fields.

Check for duplicate values in input fields - The HTML Code

<form action="#" >
	 	<div class="form-group col-md-12" style="margin-top: 2%">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>       
						<div class="col-sm-10 col-md-10 col-lg-10 col-xs-10" style=" font-weight: bold; text-align: left;font-size: 12pt">
                        Please answer any of the 4 security questions to proceed further.
						</div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>
 			<div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                        In which City were you born?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group ">
						
						<input style="border-radius: 4px!important;" id="question1" type="text"  class="form-control"  tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>
                     
                    <!--Question 2  -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                           What is your Nickname?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group">
						
						<input style="border-radius: 4px!important;" id="question2" type="text" class="form-control" tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div> 
                          <!--Question 3  -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                            What is the name of your favourite teacher?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group ">
						
						<input style="border-radius: 4px!important;" id="question3" type="text"  class="form-control" tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>  
                          <!--Question 4  -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                        Who is your favourite superstar?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group ">
						
						<input style="border-radius: 4px!important;" type="text" id="question4" class="form-control" tabindex="1" >                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>
                          <!--Question 5  -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                         What is your favourite subject?	&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group">
						
						<input style="border-radius: 4px!important;" type="text" id="question5"  class="form-control" tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>    
                          <!--Question 6 -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10" style=" padding-top: 7px;">
                         What is your favourite film?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group ">
						
						<input style="border-radius: 4px!important;" type="text" id="question6" class="form-control" tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>   
                          <!--Question 7 -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px; ">
                         What is your birth year?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group ">
						
						<input style="border-radius: 4px!important;" type="text" id="question7" class="form-control" tabindex="1" >                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>  
                          <!--Question 8  -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                          	Who is your role model?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group ">
						
						<input style="border-radius: 4px!important;" type="text" id="question8" class="form-control" tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>  
                    
                          <!--Question 9  -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                        What is your favourite food? &nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group">
						
						<input style="border-radius: 4px!important;" type="text" id="question9" class="form-control" tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div> 
                    
                          <!--Question 10  -->  
			 <div class="form-group">
                     <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                       <div class="col-sm-3 col-md-3 col-lg-4 col-xs-10 " style=" padding-top: 7px;">
                         What is your best friends name?&nbsp;:</div>
                        
						<div class="col-sm-7 col-md-7 col-lg-6 col-xs-9 input-group">
						
						<input style="border-radius: 4px!important;" type="text" id="question10" class="form-control" tabindex="1">                   
                                         
                        </div>
                       <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div> 
                      <div class="form-group">
                    <div class="col-sm-4 col-md-4 col-lg-5 col-xs-1"></div>
                        <div class="col-sm-7 col-md-7 col-lg-6 col-xs-10" style="padding-left: 0px!important;">
                          
                            <button type="button" onClick="checkDuplicate();" class="btn btn-primary" tabindex="3">
                        Submit</button>
                                 
                        </div>
                        <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
                    </div>	
                      <div class="form-group">
                     <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12" id="message1" style="font-weight: bold; text-align: center;font-size: 10pt;">
						</div>
						 </div>
</form>

In the HTML we have built a simple form. The form contains 10 questions and 10 input fields to enter their respective answers along with a submit button to submit the results.




Check for duplicate values in input fields - The JQuery Code

&lt;script type=&quot;text/javascript&quot;&gt;
function checkDuplicate(){
//Create array of input values
var allValueArray = $('input[type=text]').map(function() {
if ($(this).val() != '')

return $(this).val()
}).get();

//Create array of duplicates if there are any
var duplicateValueArray = allValueArray.filter(function(element, pos) {
if(allValueArray.indexOf(element) != pos){
return true;
}
else{
return false;
}

});

//check length of duplicate array, if any duplicate element found it is stored in duplicateValueArray after filter out.
if (duplicateValueArray.length != 0){

$('#message1').css('color','red');
$('#message1').html('Answers to security questions cannot be duplicate');
return false;
}
else{
$('#message1').css('color','green');
$('#message1').html('Congrats!! Answers to security questions are not duplicate');
return true;
}

}
&lt;/script&gt;

In the JQuery code, firstly we have the .map() function which is used to get values from the form or from a collection of elements. It passes each element in the current matched set through a function, producing a new jQuery object containing the return values. As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array. Thus, in short, we get all the values entered in the form in an array.

Next, we use the .filter() function to extract the duplicate values based on a condition. The condition is that if the indexOf(elementInArray)!=positionInArray then the function will return true and those elements are returned to a variable named duplicateValueArray. This condition is chosen since there can be multiple values in an array, however, the IndexOf function returns the index value of the 1st occurrence of the value such that any duplicate value can be eliminated easily. Post this we check whether there is any element in the duplicateValueArray using it's length. And based on that we show an error/success message.

Check for duplicate values in input fields - The Output

Output 1

No duplicate - Check For duplicate values in input fields

Output 2

duplicate value - Check For duplicate values in input fields

 

Hope you liked the post and learned something. If you did comment below and do not forget to share. Also, check our other posts.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.