使用之前的值啓用下一個表單元素

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

兩件事：

• 你應該從你的電子郵件驗證功能return true或false即validemail
• 你regex存儲爲字符串，因此你不能將其應用test功能。刪除" "

包裝上面提到的改變會給你想要的結果。

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 
} 

---

UPDATE

DEMO

它仍然會啓用phonenumber，因爲你有validation寫成這樣。

您的驗證：

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; 
}