JQuery Input Validation: How To Check Each Input For Empty or Character or Number Without form submit
<p>I am new in learning input validation using JQuery without submit the form.I want to add following validation rules in my html:</p>

<ol>
<li>Check if an input field is empty, then change background color until any valid value entered.</li>
<li>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.</li>
</ol>

<p>I want to do it manually without plugins in very simple way in jQuery.</p>

<p>Here is my Source Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
   &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
      
      &lt;style type="text/css"&gt;
         .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;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body &gt;
      &lt;div class="container"  &gt;
         &lt;div class="panel-group"&gt;
            &lt;div class="panel panel-primary"  &gt;
               &lt;div class="panel-heading" &gt;
                  &lt;h3 class="panel-title" style="text-align: center;"&gt;Test&lt;/h3&gt;
               &lt;/div&gt;
               &lt;div class="panel-body"&gt;
                  &lt;form class="form-horizontal" &gt;
                     &lt;div class="form-group"&gt;
                        &lt;label class="control-label col-sm-3"  for="acode"&gt;ID&lt;/label&gt;
                        &lt;div class="col-sm-5 " id = "empid" &gt;
                           &lt;div class="  input-group "&gt;
                              &lt;span class="input-group-addon "&gt;&lt;i class="glyphicon glyphicon-user"  aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;         
                              &lt;input class="form-control " list="employeeid" name="employeeid"  placeholder="Enter ID"&gt;
                              &lt;datalist  id="employeeid"&gt;        
                              &lt;/datalist&gt;
                              &lt;span class="input-group-btn"&gt;           
                              &lt;button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;"&gt;
                              &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-search "  aria-hidden="true" &gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;/button&gt;    
                              &lt;/span&gt;         
                           &lt;/div&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="form-group"&gt;
                        &lt;label class="control-label col-sm-3" style="text-align:right;"&gt;Name&lt;/label&gt;
                        &lt;div class="col-sm-5"&gt;                                                               
                           &lt;input type="text" class="form-control" name="employename"  id="employename" placeholder="Enter Name" &gt;        
                           &lt;span id="errmsg2" class="errmsg"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="form-group"&gt;
                        &lt;label class="control-label col-sm-3" style="text-align:right;"&gt;Number&lt;/label&gt;
                        &lt;div class="col-sm-5"&gt;                                                               
                           &lt;input type="text" class="form-control" name="number"  id="number" placeholder="Enter Number" &gt;        
                           &lt;span id="errmsg2" class="errmsg"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;div class="form-group"&gt;
                        &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                           &lt;button type="submit"  onclick="" id="button1" class="btn btn-primary"&gt;Save&lt;/button&gt;                            
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/form&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;   
   
   &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>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</p>