即使使用了preventDefault，表单仍然可以提交

Form still submits even with preventDefault

本文关键字：提交 preventDefault 表单      更新时间：2023-09-26

我不知道这里出了什么问题。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; }

因为您将prevent默认值放在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;
}
});

您可以在html中将按钮类型从submit更改为button。

然后点击验证，然后在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(); }
        }
    });
});
相关文章：