Очистка формы html после submit с помощью ajax

379

03 мая 2018, 07:21

У меня есть обычная html форма, которая проходит валидацию на frontend и на backend. На frontend валидация осуществляется при помощи плагина jQuery validate, а на backend кастомной валидацией. Вот форма

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kultprosvet test</title>
</head>
<body>
    <div>
        <form id = "form">
            <input id = "name" type = "text" minlength="2" placeholder="Ваше имя" name = "name" required>
            <input id = "s_name" type = "text" placeholder="Ваша фамилия" name = "s_name" required>
            <input id = "email" type = "text" placeholder="email" name = "email" required>
            <select id = "ticket" required name = "ticket">
                <option>free</option>
                <option>standart</option>
                <option>premium</option>
            </select>
            <input id = "submit" type = "submit">
        </form>
        <div id = "errors"></div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src = "script.js"></script>
</body>

Сабмит формы происходит при помощи submitHandler что является методом jQuery validate. Валидация формы на frontend неважна, она работает коретно. Вот кусок кода, который работает именно при удачном submit

 (function ($) {
    'use strict';
    $(document).ready(function() {
        $('#form').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                s_name: "required",
                email: {
                    required: true,
                    myEmail: true
                }
            },
            messages: {
                name: {
                    required: "Введите имя",
                    minlength: "Имя слишком короткое"
                },
                s_name: "Введите фамилию",
                email: {
                    required: "Введите email",
                    minlength: "Введите корректный email"
                }
            },
            submitHandler: function() {
                $.ajax({
                    url: "registration_form.php",
                    type: "POST",
                    data: $("#form").serialize(),
                    success: function (result) {
                        if(result) {
                            $("#errors").text(result);
                        }
                        else {
                            console.log('no errors');
                            $('#form')[0].reset(); /*Вот это не работает*/
                            $("#errors").empty(); /*Вот это не работает*/
                        }
                    }
                });
            }
        });
        jQuery.validator.addMethod("myEmail", function(value, element) {
            return this.optional( element ) || /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( value );
        }, 'Введите корректный email');
    });
}(jQuery));

А вот скрипт registration_form.php, который отвечает за запись в базу данных и тоже совершает некоторую валидацию

<?php
date_default_timezone_set('UTC');
$name = htmlspecialchars($_POST['name']);
$s_name = htmlspecialchars($_POST['s_name']);
$email = htmlspecialchars($_POST["email"]);
$ticket = htmlspecialchars($_POST['ticket']);
$date = date('d_m_Y');
$valid_email = filter_var($email, FILTER_VALIDATE_EMAIL);
$table_name = 'registration_' . $date;
if(!$valid_email) {
    die ("Введите коректный email");
}
if((strlen($name) <= 1) || (!$s_name) || (!$email) || (!$ticket)){
    die ("Все поля должны быть заполнены");
}
$connect = mysqli_connect('localhost', 'root', 'password') or die('Connection error');
$create_db = mysqli_query($connect, "CREATE DATABASE IF NOT EXISTS kultprosvet");
$connect_db = mysqli_select_db($connect, "kultprosvet");
$table = "CREATE TABLE $table_name (
            id INT(10) NOT NULL AUTO_INCREMENT, 
            name VARCHAR(100) NOT NULL DEFAULT '',
            s_name VARCHAR(100) NOT NULL DEFAULT '',
            email VARCHAR(100) NOT NULL DEFAULT '',
            ticket VARCHAR(100),
            PRIMARY KEY (id)
        )";
$result = mysqli_query($connect, "SELECT email FROM $table_name");
if($result) {
    while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
        if($row['email'] == $email){
            die('такой email существует');
        };
    }
}

$query_table = mysqli_query($connect,$table);
$query = mysqli_query($connect,"insert into $table_name(name, s_name, email, ticket) values ('$name', '$s_name', '$email','$ticket')");
if(mysqli_errno($connect) > 0){
    echo mysqli_errno($connect). ": " . mysqli_error($connect);
}
mysqli_close($connect);
?>

Все работает как мне и нужно (по крайней мере багов сам не обнаружил), кроме очистки формы при удачном submit (комментированный кусок в js). Скрипт всегда попадает в данное условие

if(result) {
    $("#errors").text(result);
}

Подскажите как исправить. Спасибо

Answer 1

Если вы делаете ajax, то вы должны получить качественный ответ от скрипта.
В данном виде это просто не качественное исполнение.
В php создайте объект и заполняете его
Например

<?php
// Установим заголовок для данных
header("Content-type: application/json; charset=UTF-8");
$result = new stdClass();
$result->messages = array();
$result->error = false;

date_default_timezone_set('UTC');
$name = htmlspecialchars($_POST['name']);
$s_name = htmlspecialchars($_POST['s_name']);
$email = htmlspecialchars($_POST["email"]);
$ticket = htmlspecialchars($_POST['ticket']);
$date = date('d_m_Y');
$valid_email = filter_var($email, FILTER_VALIDATE_EMAIL);
$table_name = 'registration_' . $date;
if(!$valid_email) {
    $result->error = true;
    $result->messages[] = "Введите коректный email";
}
if((strlen($name) <= 1) || (!$s_name) || (!$email) || (!$ticket)){
    $result->error = true;
    $result->messages[] = "Все поля должны быть заполнены";
}
// Если есть ошибки, то не мучаем мускул. Отправляем JSON
if($result->error){
    echo json_encode($result);
    exit();
}
// Предварительных ошибок нет
$connect = mysqli_connect('localhost', 'root', 'password') or die('Connection error');
$create_db = mysqli_query($connect, "CREATE DATABASE IF NOT EXISTS kultprosvet");
$connect_db = mysqli_select_db($connect, "kultprosvet");
$table = "CREATE TABLE $table_name (
            id INT(10) NOT NULL AUTO_INCREMENT, 
            name VARCHAR(100) NOT NULL DEFAULT '',
            s_name VARCHAR(100) NOT NULL DEFAULT '',
            email VARCHAR(100) NOT NULL DEFAULT '',
            ticket VARCHAR(100),
            PRIMARY KEY (id)
        )";
$result = mysqli_query($connect, "SELECT email FROM $table_name");
if($result) {
    while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
        if($row['email'] == $email){
            $result->error = true;
            $result->messages[] = 'такой email существует';
            echo json_encode($result);
            exit();
        };
    }
}

$query_table = mysqli_query($connect,$table);
$query = mysqli_query($connect,"insert into $table_name(name, s_name, email, ticket) values ('$name', '$s_name', '$email','$ticket')");
if(mysqli_errno($connect) > 0){
    // НЕ НУЖНО ОТПРАВЛЯТЬ ОШИБКИ mySQL!!!
    // echo mysqli_errno($connect). ": " . mysqli_error($connect);
    $result->error = true;
    $result->messages[] = 'Произошла ошибка. Попробуйте ещё раз'
}
mysqli_close($connect);

echo json_encode($result);
?>

Ну а в javascript ловите json и проверяйте свойство error Если false значит всё без ошибок. true - значит есть ошибки и сообщения результата валидации.

    submitHandler: function() {
        $.ajax({
            url: "registration_form.php",
            type: "POST",
            data: $("#form").serialize(),
            success: function (result) {
                if(result.error) {
                    $("#errors").html(result.messages.join('<br>'));
                }
                else {
                    // А вот теперь это должно работать
                    console.log('no errors');
                    $('#form')[0].reset(); /*Вот это не работает*/
                    $("#errors").empty(); /*Вот это не работает*/
                }
            }
        });
    }