表格仍然提交甚至與preventDefault

Question

我不知道這裏有什麼問題。 preventDefault應該停止提交表單，但仍然繼續。我有一個ajax調用，它驗證用戶是否有效。如果不是，請阻止提交。否則，繼續登錄和主頁。

表

<form id="signIn" method="post" action="processForms.php"> 
    <table cellspacing="10"> 
     <tr id="errorSignIn" hidden="hidden"> 
      <td class="centerItem errorMessage" colspan="3"> 
       Incorrect Username and/or Password 
      </td> 
     </tr> 
     <tr> 
      <td><input type="text" id="username" name="username" autocomplete="off" autofocus required placeholder="Username..."></td> 
      <td><input type="password" id="password" name="password" autocomplete="off" required placeholder="Password..."></td> 
      <td><input type="submit" name="processButton" class="signIn" value="Sign-in" ></td> 
     </tr> 
    </table> 
</form> 

的Javascript

$('#signIn').submit (function (e) { 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    var dataString = "username=" + username + "&password=" + password; 
    $.ajax({ 
     type: "POST", 
     url: "ajaxCheck.php", 
     data: dataString, 
     cache: false, 
     success: function (result) { 
      if (!result) { 
       $('#errorSignIn').removeAttr('hidden'); 
       e.preventDefault(); 
       return false; 
      } 
     } 
    }); 
}); 

ajaxCheck.php

<?php 
$username = $_POST['username']; 
$password = $_POST['password']; 
$password = md5($password); 
$dbConnection = mysqli_connect('localhost','root','','onboard'); 
$query = "SELECT * FROM account WHERE username='$username' AND password='$password'"; 
$result = mysqli_query($dbConnection,$query); 
$count = mysqli_num_rows($result); 
if ($count == 1) { echo true; } 
else { echo false; } 

Answer 1

因爲你是丘比特在ajax成功函數內的預防默認是異步的。所以這就是爲什麼它仍然提交。你必須在調用ajax之前而不是在ajax完成之前阻止它。

$('#signIn').submit (function (e) { 
     e.preventDefault(); // put preventDefault here not inside the ajax success function 
     var username = $('#username').val(); 
     var password = $('#password').val(); 
     var dataString = "username=" + username + "&password=" + password; 
     $.ajax({ 
      type: "POST", 
      url: "ajaxCheck.php", 
      data: dataString, 
      cache: false, 
      success: function (result) { 
       if (!result) { 
        $('#errorSignIn').removeAttr('hidden'); 

        return false; 
       } 
      } 
     }); 
    }); 

在這裏回答您的關注問題是您可以做的事情。

var isFormChecked = false; // this variable will deremine if the ajax have finished what you wanted to do 
$('#signIn').submit (function (e) { 

// if ajax set this to true, it will not go here when it triggers. 
if(!isFormChecked){ 
    e.preventDefault(); // put preventDefault here not inside the ajax success function 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    var dataString = "username=" + username + "&password=" + password; 
    $.ajax({ 
     type: "POST", 
     url: "ajaxCheck.php", 
     data: dataString, 
     cache: false, 
     success: function (result) { 
      // if result is set to true 
      isFormChecked = result; 
      // then trigger the submit of the form 
      $('#signIn').trigger('submit'); 

     } 
    }); 
} else { 
    // form is submitted 
    isFormChecked = true; 
} 
}); 

Answer 2

你可以做的是把你的html中的按鈕類型從提交改爲按鈕。

然後點擊驗證，然後在jQuery的幫助下提交表單。

這裏是它如何做你的工作：

<form id="signIn" method="post" action="processForms.php" > 
    <table cellspacing="10"> 
     <tr id="errorSignIn" hidden="hidden"> 
      <td class="centerItem errorMessage" colspan="3"> 
       Incorrect Username and/or Password 
      </td> 
     </tr> 
     <tr> 
      <td><input type="text" id="username" name="username" autocomplete="off" autofocus required placeholder="Username..."></td> 
      <td><input type="password" id="password" name="password" autocomplete="off" required placeholder="Password..."></td> 
      <td><input type="button" name="processButton" class="signIn" value="Sign-in" ></td> 
     </tr> 
    </table> 
</form> 



$('#processButton').click (function (e) { 
    var username = $('#username').val(); 
    var password = $('#password').val(); 
    var dataString = "username=" + username + "&password=" + password; 
    $.ajax({ 
     type: "POST", 
     url: "ajaxCheck.php", 
     data: dataString, 
     cache: false, 
     success: function (result) { 
      if (!result) { 
       $('#errorSignIn').removeAttr('hidden'); 
       return false; 
      } 
      else { $("#signIn").submit(); } 
     } 
    }); 
});