title: How to activate form field one by one with the valid values user entered
body: <p>I do have a Form and now I need to activate this form's field one by one. That mean If an user fill out first field correctly (Not empty and should be valid) then I need to activate second one and so on. </p>
  
  <p>This is my HTML form: </p>
  
  <pre><code>&lt;form&gt;
      &lt;div class="form-group"&gt;
          &lt;label for=""&gt;First Name&lt;/label&gt;
          &lt;input type="text" class="form-control name" placeholder="First Name"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for=""&gt;Email address&lt;/label&gt;
          &lt;input type="email" class="form-control email" placeholder="Enter email" disabled&gt;
      &lt;/div&gt;    
      &lt;div class="form-group"&gt;
          &lt;label for=""&gt;Phone Number&lt;/label&gt;
          &lt;input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is how I tried it in <code>jquery</code>: </p>
  
  <pre><code>   function fakeValidator(event) {
       var $element = $(event.target);
          if ($element.val().length &gt;= 3) {
              $element.addClass('valid');
          } else {
              $element.removeClass('valid');
          }
      }
  
      function enableNextElement(event) {
          var $element = $(event.target);
          if ($element.hasClass('valid')) {
              $element.closest('.form-group')
                  .next('.form-group')
                  .find('.sequence')
                  .removeAttr('disabled');
          }
      }
  
      $(document).ready(function() {
          $('.sequence').on('change blur keyup', fakeValidator);
          $('.sequence').on('change blur keyup', enableNextElement);
      });
  </code></pre>
  
  <p>This coding working for me but not work with validation. That mean if an user entered a not valid email next field is activating. But I want to keep next field disable till user entered a valid email. </p>
  
  <p>Can anybody tell me how to do it? </p>
  
  <p><strong>UPDATED HTML</strong></p>
  
  <pre><code>&lt;form role="form" class="banner" method="post" action=""&gt; 
    &lt;div class="form-group"&gt;
      &lt;div class="icon-addon addon-md"&gt;
        &lt;input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required&gt;
        &lt;label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;div class="icon-addon addon-md"&gt;
        &lt;input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required&gt;
        &lt;label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"&gt;&lt;/label&gt;
        &lt;span class="email-error"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;div class="icon-addon addon-md"&gt;
        &lt;input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required&gt;
        &lt;label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;                   
  
    &lt;div class="element-left"&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="icon-addon addon-md"&gt;
          &lt;input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled&gt;
          &lt;label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"&gt;&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  
    &lt;div class="element-right"&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="icon-addon addon-md"&gt;
          &lt;input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled&gt;
          &lt;label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"&gt;&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;div class="element-left"&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="icon-addon addon-md"&gt;
          &lt;input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled&gt;
          &lt;label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"&gt;&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  
    &lt;p class="form-actions"&gt;
      &lt;button type="submit" name="submit" class="btn btn-default btn-block"&gt;
        &lt;span class="btn-orange-inner"&gt;Send&lt;/span&gt;
      &lt;/button&gt;
    &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Thank you. </p>