javascript - 使用上一个表单元素的值启用下一个表单元素

Question

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

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

这是我的表单的 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);

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

谁能告诉我这有什么问题吗？ 谢谢。

Answer 1

两件事:

• You should return true or false from your email validation function i.e. validemail
• Your regex is stored as string, and hence you cannot apply test function on it. Remove wrapping it in " "

上述更改将为您带来所需的结果。

function validemail(value){
  var emailReg =/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; //regex
    return emailReg.test(value); //use test which returns true or false
}

<小时/>

更新

<强> DEMO

它仍然会启用电话号码，因为您已经以这种方式编写了验证。

您的验证:

if (values.length >= 3) {  
   //this is ok for name
   if($element.hasClass('email_address')) {
        if(validemail(values)){              
            flag = true;
        }else{        
            flag =false;//even though flag is false here
        }
   }
   flag =true; //when it comes to this line it again makes it to true
   //and for email along with length>3, valid email address has also to be validated
} else {        
    flag =false;
}

我的解决方法

if (values.length >= 3) {  
    flag =true; //set this first
    if($element.hasClass('email_address')) {//then perform other validations
        if(validemail(values)){              
           flag = true ;
        }else{        
           flag =false;
        }
    }
} else {        
    flag =false;
}