启用值为previous的下一个表单元素

我确实需要创建一个表单。在该表单中，我需要一个接一个地启用表单元素。这意味着，如果用户向第一个元素输入了有效的数据，那么我希望自动聚焦下一个元素，以此类推。

注意:当页面加载时，我想保持所有元素禁用，除了第一个元素。

这是我的HTML形式。

<form role="form" class="banner" method="post" action=""> 
  <div class="form-group">
    <div class="icon-addon addon-md">
      <input type="text" name="name" placeholder="Your Name" class="form-control first-name sequence" autocomplete="off" required>
      <label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
    </div>
  </div>
  <div class="form-group">
    <div class="icon-addon addon-md">
      <input type="email" name="email" placeholder="Your Email" class="form-control email_address sequence" autocomplete="off" disabled required>
      <label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
      <span class="email-error"></span>
    </div>
  </div>
  <div class="form-group">
    <div class="icon-addon addon-md">
      <input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
      <label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
    </div>
  </div>                      
  <div class="element-left">
    <div class="form-group">
      <div class="icon-addon addon-md">
        <input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off">
        <label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
      </div>
    </div>  
  </div>
  <div class="element-right">
    <div class="form-group">
      <div class="icon-addon addon-md">
        <input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off">
        <label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
      </div>
    </div> 
  </div> 
  <p class="form-actions">
    <button type="submit" name="submit" class="btn btn-default btn-block">
      <span class="btn-orange-inner">Send</span>
    </button>
  </p>
</form>

我是这样在jQuery中尝试的:

// form validation 
function fakeValidator(event) {
  var flag = false;    
  var $element = $(event.target);
  var values = $element.val();
  if (values.length >= 3) {  
    if($element.hasClass('email_address')) {
      if(validemail(values)){              
        flag = true ;
      }else{        
        flag =false;
      }
    }
    flag =true;     
  } else {        
    flag =false;
  }
  if(flag){ 
    //alert('hi');
    $element.addClass('valid');
    enableNextElement(event);     
  } else{
    alert('hi el');
    $element.removeClass('valid');
    //$element.addAttr('disabled');
  }
}
function validemail(value){
  var emailReg ="/^([a-zA-Z0-9_.+-])+'@(([a-zA-Z0-9-])+'.)+([a-zA-Z0-9]{2,4})+$/";
}
function enableNextElement(event) {
  var $element = $(event.target);
  if ($element.hasClass('valid')) {
      $element.closest('.form-group')
          .next('.form-group')
          .find('.sequence')
          .removeAttr('disabled');
  }
}
$('.sequence').on('blur keyup', fakeValidator);

但是我的问题是，如果我输入了一个无效的电子邮件，下一个元素是启用的。但我想启用下一个元素，如果它是一个有效的电子邮件在电子邮件字段。