JQuery Input Validation: How To Check Each Input For Empty or Character or Number Without form submit

Question

I am new in learning input validation using JQuery without submit the form.I want to add following validation rules in my html:

Check if an input field is empty, then change background color until any valid value entered.
Check whether Name only field is getting character string and Number only field is getting numbers, Otherwise change background color until any valid value entered.

I want to do it manually without plugins in very simple way in jQuery.

Here is my Source Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
      <style type="text/css">
         .bs-example{
         //font-family: sans-serif;
         position: relative;
         margin: 100px;
         }
         .typeahead, .tt-query, .tt-hint {
         border: 2px solid #CCCCCC;
         border-radius: 8px;
         font-size: 12px;
         height: 100%px;
         line-height: 100%px;
         outline: medium none;
         padding: 8px 12px;
         //width: 100%;
         }
         .twitter-typeahead {
         width: 100%;
         display:block !important;
         }
         .typeahead {
         background-color: #84e184;
         }
         .typeahead:focus {
         border: 2px solid #0097CF;
         }
         .tt-query {
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
         }
         .tt-hint {
         color: #999999;
         }
         .tt-dropdown-menu {
         background-color: #FFFFFF;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 12px;
         padding: 8px 0;
         //width: 422px;
         }
         .tt-suggestion {
         font-size: 12px;
         line-height: 12px;
         padding: 3px 20px;
         }
         .tt-suggestion.tt-is-under-cursor {
         background-color: #0097CF;
         color: #FFFFFF;
         }
         .tt-suggestion p {
         margin: 0;
         }
      </style>
   </head>
   <body >
      <div class="container"  >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading" >
                  <h3 class="panel-title" style="text-align: center;">Test</h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="acode">ID</label>
                        <div class="col-sm-5 " id = "empid" >
                           <div class="  input-group ">
                              <span class="input-group-addon "><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>							  
                              <input class="form-control " list="employeeid" name="employeeid"  placeholder="Enter ID">
                              <datalist  id="employeeid">								
                              </datalist>
                              <span class="input-group-btn">							    
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true" ></i></span>
                              </button>    
                              </span>							  
                           </div>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-3" style="text-align:right;">Name</label>
                        <div class="col-sm-5">                                                               
                           <input type="text" class="form-control" name="employename"  id="employename" placeholder="Enter Name" >        
                           <span id="errmsg2" class="errmsg"></span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-3" style="text-align:right;">Number</label>
                        <div class="col-sm-5">                                                               
                           <input type="text" class="form-control" name="number"  id="number" placeholder="Enter Number" >        
                           <span id="errmsg2" class="errmsg"></span>
                        </div>
                     </div>
                     <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                           <button type="submit"  onclick="" id="button1" class="btn btn-primary">Save</button>                            
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
      <script>		 
	  
	  </script>
   </body>
</html>

If i understand this validation then it will be very helpful for me to understand more complex validation in future.so please help me.Thanks

do you want to check the validation on submit click or when user loses focus? — Gaurav Aggarwal
– Gaurav Aggarwal, Commented Jun 8, 2016 at 6:28
Thanks @Gaurav Aggarwal for quick reply.Actually I want before submit.but also i want ensure that no input is empty during submit.thanks — user5005768-hd
– user5005768-hd, Commented Jun 8, 2016 at 6:30

Gaurav Aggarwal · Accepted Answer · 2016-06-08 07:12:01Z

Check this jquery code which is doing the same for you.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      
      <style type="text/css">
         .bs-example{
         //font-family: sans-serif;
         position: relative;
         margin: 100px;
         }
         .typeahead, .tt-query, .tt-hint {
         border: 2px solid #CCCCCC;
         border-radius: 8px;
         font-size: 12px;
         height: 100%px;
         line-height: 100%px;
         outline: medium none;
         padding: 8px 12px;
         //width: 100%;
         }
         .twitter-typeahead {
         width: 100%;
         display:block !important;
         }
         .typeahead {
         background-color: #84e184;
         }
         .typeahead:focus {
         border: 2px solid #0097CF;
         }
         .tt-query {
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
         }
         .tt-hint {
         color: #999999;
         }
         .tt-dropdown-menu {
         background-color: #FFFFFF;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 12px;
         padding: 8px 0;
         //width: 422px;
         }
         .tt-suggestion {
         font-size: 12px;
         line-height: 12px;
         padding: 3px 20px;
         }
         .tt-suggestion.tt-is-under-cursor {
         background-color: #0097CF;
         color: #FFFFFF;
         }
         .tt-suggestion p {
         margin: 0;
         }
      </style>
   </head>
   <body >
      <div class="container"  >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading" >
                  <h3 class="panel-title" style="text-align: center;">Test</h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="acode">ID</label>
                        <div class="col-sm-5 " id = "empid" >
                           <div class="  input-group ">
                              <span class="input-group-addon "><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>							  
                              <input class="form-control " list="employeeid" name="employeeid" id="employeeid"  placeholder="Enter ID">
                              <datalist  id="employeeid">								
                              </datalist>
                              <span class="input-group-btn">							    
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true" ></i></span>
                              </button>    
                              </span>							  
                           </div>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-3" style="text-align:right;">Name</label>
                        <div class="col-sm-5">                                                               
                           <input type="text" class="form-control" name="employename"  id="employename" placeholder="Enter Name" >        
                           <span id="errmsg2" class="errmsg"></span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-3" style="text-align:right;">Number</label>
                        <div class="col-sm-5">                                                               
                           <input type="text" class="form-control" name="number"  id="number" placeholder="Enter Number" >        
                           <span id="errmsg2" class="errmsg"></span>
                        </div>
                     </div>
                     <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                           <button type="submit"  onclick="" id="button1" class="btn btn-primary">Save</button>                            
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
      <script>
      checkEmpty();
      function checkEmpty(){
        $('form').find('input').on('blur', function(){
          if($(this).val()==''){
            $(this).css('background-color','red');
          } else {
            $(this).css('background-color','transparent');
          };
        });
      };

      $('button#button1').on('click', function(){
		$('form').find('input').each(function(){
		  if($(this).val()==''){ 
            $(this).css('background-color','red');
          } else {
            $(this).css('background-color','transparent');
          };
        });

      });

      $('#employeeid,#number').keypress(function(e){
          if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
             return false;
          }
      });

      $('#employename').keypress(function(e) {
          if(e.which < 97 /* a */ || e.which > 122 /* z */) {
              e.preventDefault();
          }
      });
	  </script>
   </body>
</html>

Thanks a lot @Gaurav Aggarwal. However If you noticed that if i press the submit form keeping all the fields empty, then it is not changing the color of empty fields.Thanks
Thanks @Gaurav Aggarwal.The individual field was correct .But I mean if you press the submit button with keeping fields empty then, the empty input fields are not changing their background color.Thanks again for your help.

Collectives™ on Stack Overflow

JQuery Input Validation: How To Check Each Input For Empty or Character or Number Without form submit

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related