即使返回值为false，为什么表单会提交？

我有一个引导登录表单和Javascript验证：即使返回值为false，为什么表单会提交？

HTML

<form id="loginForm" class="form-horizontal" role="form" action="registration.php" method="POST"> 
     <div class="form-group"> 
       <label class="control-label col-sm-2 modal-text" for="loginEmail">Email:</label> 
       <div class="col-sm-10"> 
        <input type="email" class="form-control modal-input" id="loginEmail" placeholder="Insert email"/> 
       </div> 
     </div> 
     <div class="form-group"> 
       <label class="control-label col-sm-2 modal-text" for="loginPassword">Password:</label> 
       <div class="col-sm-10"> 
        <input type="password" class="form-control modal-input" id="loginPassword" placeholder="Insert password"/> 
       </div> 
     </div> 
     <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
         <div class="checkbox"> 
           <label class="modal-text"><input type="checkbox"/> Remember me</label> 
         </div> 
       </div> 
     </div> 
     <button type="button" class="btn btn-default btn-block buttons" id="loginBtn">Login</button> 
</form>

这是我的JavaScript验证：

function validateEmail(id){ 
    var $div = $('#' + id).closest('div'); 
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 

    if(!regex.test($('#' + id).val())) 
    { 
     $div.addClass('has-error'); 
     return false; 
    } 
    else 
    { 
     $div.removeClass('has-error'); 
     return true; 
    } 
} 

function validateText(id){ 
    var $div = $('#' + id).closest('div'); 

    if($('#' + id).val() == null || $('#' + id).val() == '') 
    { 
     $div.addClass('has-error'); 
     return false; 
    } 
    else 
    { 
     $div.removeClass('has-error'); 
     return true; 
    } 
} 

$(document).ready(function(){ 
    $('#loginBtn').click(function(){ 

      if(!validateEmail('loginEmail')) 
      { 
       return false; 
      } 
      if(!validateText('loginPassword')) 
      { 
       return false; 
      } 

      $('form#loginForm').submit(); 

     }); 
});

如果我按下登录按钮，表格立即提交连如果字段为空。是否有我失踪或做错的事？

UPDATE 我发现的是，我把引号引起我的正则表达式，导致javascript错误。我也将按钮类型从提交更改为按钮。现在它正在工作。

所以总结一下：我的验证没有工作，因为正则表达式中的引号。即使我离开按钮类型提交，验证也会起作用。

来源

2016-08-24 PeMaCN

使用onsubmit而不是onclick，并在表单有效时返回true。

在你的情况下，onclick事件将被触发，正确返回false，然后由于按钮仍然是submit类型，它仍然会提交表单。

来源

2016-08-24 08:14:04

它提出无论如何，因为按钮是一个提交按钮：

<button type="submit"

从点击处理程序将返回false取消点击事件，但没有其他的事件 - 即提交事件仍是起火。与type="submit"和method="POST"

<button type="button"

来源

2016-08-24 08:15:51

您已经使用按钮：

您可以更改按钮type=button，然后提交单击处理程序的形式（这你已经做）。所以，当你点击按钮时，它立即提交表单。为您的提交按钮尝试type="button"。

来源

2016-08-24 08:16:25 Kashyap

停止事件处理，也许你不想做别的，而不是提交表单，如果它是有效的

$('#loginBtn').click(function (Evt){ 
      Evt.stopPropagtion(); 
      Evt.preventDefault(); 
      if(!validateEmail('loginEmail')) 
      { 
       return false; 
      } 
      if(!validateText('loginPassword')) 
      { 
       return false; 
      } 

      $('form#loginForm').submit(); 

     });

来源

2016-08-24 08:34:33 cske

即使返回值为false，为什么表单会提交？

回答

相关问题