onsubmit не работает с проверкой ajax mysql

Я знаю, что есть много подобных вопросов, но я не смог найти тот, который решает мою проблему.

Дело в том, что я хочу проверить, существует ли пользователь/пароль в моей форме для базы данных mysql, и я делаю это, вызывая функцию javascript в атрибуте onsubmit формы, которая отправляет ввод через 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>

ЯВАСКРИПТ/АЯКС

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. Но я не могу понять, что это такое, и через несколько часов я как никогда близок к приюту.

Заранее спасибо!


person vicRR    schedule 04.06.2014    source источник
comment
используйте return false; непосредственно перед }else{   -  person Amit Garg    schedule 04.06.2014
comment
тогда вообще не сдается   -  person vicRR    schedule 04.06.2014
comment
да, его не следует отправлять, если вы публикуете с помощью ajax. В противном случае ваш текущий запрос ajax будет остановлен, и форма будет отправлена ​​напрямую.   -  person Amit Garg    schedule 05.06.2014
comment
так как вы предлагаете мне проверить с базой данных?   -  person vicRR    schedule 05.06.2014
comment
я имею в виду, что мне нужно отправить форму, потому что я хочу войти с другого сайта   -  person vicRR    schedule 05.06.2014


Ответы (2)


Внутри вашего 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
person Deepu    schedule 04.06.2014
comment
или return false после отправки - person Daan; 04.06.2014
comment
e не определено, нет? Вы должны добавить его как параметр в function validateForm(e) - person DarkBee; 04.06.2014
comment
См. этот stackoverflow.com/questions /10323392/ - person Deepu; 04.06.2014

Наконец-то я смог это сделать, поместив форму и всю логику в один PHP-файл:

    <!-- The HTML login form -->
    <form method="post" action="<?=$_SERVER['PHP_SELF']?>">
        <div>
            <label for="username">Login</label><br/>
            <input placeholder="Introduce tu login" type="text" id="user" name="username" 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" name="submit" value="ENTRAR" />
    </form>

    <?php
    if (isset($_POST['submit'])){
        include_once 'includes/db_connect.php';
        include_once 'includes/functions.php'; 
        sec_session_start();

        $username = $_POST['username'];
        $password = $_POST['password'];     

            if (login($username, $password, $mysqli) == true) {
                // Login success
                echo '<script type="text/javascript">window.location.replace("graficas.php");</script>';

            } else {
                // Login failed
                echo '<script type="text/javascript">document.getElementById(\'error_message\').innerHTML = "Login/Password incorrectos!";</script>';
            }
    }
    ?>

Генерация JS-скриптов через «эхо», когда это необходимо для изменения элементов и избегания проблемы с AJAX.

Ключевым элементом здесь является

isset($_POST['submit'])

чтобы проверить, была ли форма отправлена ​​ранее.

Я взял идею из этого замечательного руководства: http://w3epic.com/php-mysql-login-system-a-super-simple-tutorial/

person vicRR    schedule 06.06.2014