javascript - onsubmit 不适用于 ajax mysql 验证

Question

我知道有很多类似的问题，但我一直找不到能解决我的问题的问题。

问题是我想检查我的表单中的用户/密码是否存在于 mysql 数据库中，我通过在表单的 onsubmit 属性中调用 javascript 函数来实现这一点，该函数通过 AJAX 将输入发送到检查它的 php 并将结果回显给 javascript 函数，该函数会提醒用户并返回 false 或返回 true 以便提交表单。

HTML

<span id="error_message" style="color:#CC3300;font-size:15px" ></span><br/>
<form method="post" action="./includes/process_login.php" onsubmit="return validateForm()" name="login_form">
    <div>
        <label for="email">Email</label><br/>
        <input placeholder="Introduce tu email" type="text" id="email" name="email" maxlength="50" />
    </div>
    <div>
        <label for="password">Password</label><br/>
        <input placeholder="Introduce tu password" type="password" name="password" id="password" maxlength="16" />
    </div>
    <div>
        <a class="passwordReset" href="./admin/passwordRecovery.php">He olvidado mi contraseña...</a>
    </div>
    <input type="submit" id="submit_button" value="ENTRAR" />
</form>

JAVASCRIPT/AJAX

function validateForm() {
    var pattern = new RegExp(/* Email validation pattern */);
    var isValid;

    if (pattern.test($("#email").val())) {  
        $.ajax({
            url: "../includes/process_login.php",
            cache: false,
            type: "POST",
            data: "email=" + $("#email").val() + "&password=" + $("#password").val(),
            success: function(data){
                if (data == '1') {
                    isValid = true;
                } else {
                    $("#error_message").text('Email/Password incorrectos!CCC');
                    isValid = false;
                }
            },

            error: function(){
                $("#error_message").text('Email/Password incorrectos!');
                isValid = false;
            }
        });
} else {
    $("#error_message").text('El email debe tener un formato válido');
    isValid = false;

}

return isValid;
}

PHP 验证和表单操作:

<?php
include_once 'db_connect.php';
include_once 'functions.php';

sec_session_start();

if (isset($_POST['email'], $_POST['password'])) {
    $email = $_POST['email'];
    $password = $_POST['password'];

    if (login($email, $password, $mysqli) == true) {
        // Login success 
    header("Location: ../graficas.php");
        echo '1';
    } else {
        // Login failed 
    echo '0';
    }
} else {
    // The correct POST variables were not sent to this page.
    echo '0';
}

exit;

当电子邮件输入强制发送电子邮件正则表达式时，表单始终会提交，因此问题一定出在ajax函数内部。但我不知道那是什么，几个小时后，我比以往任何时候都更接近庇护所。

提前致谢!

Answer 1

在 validateForm() 中添加此内容以防止表单提交

e.preventDefault();

像这样

function validateForm(e){
  var pattern = new RegExp(/* Email validation pattern */);
  var isValid;
  if (pattern.test($("#email").val())) {  
   e.preventDefault();
   //Do rest of your code