emptiness of multiple input fields

Check Emptiness of Multiple Input fields in a form

In this post, we will learn how to check emptiness of multiple input fields in a form. Let's say you have a situation where you want the user to set up the answers to his/her authentication questions and you will have to check whether the user has answered minimum 4 questions out of 10 questions before proceeding. One way to do the same is by extracting all the values of the input fields using Jquery or Javascript and checking them one by one and maintaining a counter. But the problem lies here, what if you have a huge list of questions or every time you add a question to the list you will manually have to again extract and check its value. What if I told you there is also an easier way. 

The simplest way to do it is by using the each() method of Jquery. The each method iterate over a jquery object. Let us look through an example to understand this.

The JSP Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Question Setup</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form action="#" >
	 <div class="form-group" style="text-align: right;">
                     <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 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="checkInputField();" 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>
<script type="text/javascript">
function checkInputField(){
	   var count=0;
	   $('input[type=text]').each(function(){
		     var text_value=$(this).val();
		     if(text_value!='')
		       {
		    	 count++;
		        //console.log('Value exist');
		        }

		   })
		  // alert("Count is "+count);
	   if(count>=4){
		   $('#message1').css('color','Green');
		   $('#message1').html('You have answered 4 or more questions');
		   return true;
	   }
	   else{
		   $('#message1').css('color','red');
		   $('#message1').html('Please answer at least 4 Authentication questions');
		   return false;
	   }
}
</script>
</body>



The OUTPUT: Success

emptiness of multiple input fields success

The OUTPUT: Failure

emptiness of multiple input fields fail

 

Explanation

So, over here we have created a form that contains 10 input fields. Note that the number of input fields has been kept as 10 for simplification, it can contain more than that and our code would work just fine. In the JSP page, we can see that we also have a script which is invoked on submit button press. On clicking the submit button the checkInputField() is invoked. Inside the script, we implement the each function based on the selector type=text as all the input fields are text type, if the same would be password type then we would also have changed the type in the each function to password. In the function, we extract the values of the input fields and check whether they contain any value. We also have placed a counter (count) whose value when equal or greater than 4 we would return success else it would be a failure. The value of the counter depends on how many questions we want the user to answer before proceeding further.

That's it we are done. Hope you learned something if you did please share and comment below. ALso do not forget to check our other articles.

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.