Ajax-форма. Пример формы с валидацией полей на стороне сервера


В этой статье я хочу показать пример работы с ajax. В качестве примера рассмотрим обычную форма с четырьмя полями — имя, e-mail, пароль и подтверждение пароля. После заполнения полей, с помощью ajax`a отправим данные на сервер и проверим их на корректность: чтобы поля были обязательно заполнены, а также поля с паролем и подтверждением пароля имели одинаковые значения.

Для работы формы необходимо подключить библиотеку jQuery. Приступим к написанию формы. Для начала составим html форму и напишем пару стилей для нее:

<style>
.label_desc{
    display: block;
}
.error{
    display: none;
}
.error_input{
    border: 2px solid #FF0000; 
}
</style>
 
<form action="ajax_index.php" id="form_test" method="post">
 
    <label class="label_desc">Name:</label>
    <input type="text" id="name_user"/>
    <label id="name_user_error" class="error"></label>
    <br/>
     
    <label class="label_desc">E-mail:</label>
    <input type="text" id="email_user" /> 
    <label id="email_user_error" class="error"></label>
    <br/>
     
    <label class="label_desc">Password:</label>
    <input type="password" id="password_user" />
    <label id="password_user_error" class="error"></label>
    <br/>
     
    <label class="label_desc">Repeat Password:</label>
    <input type="password" id="password_2_user" />
    <label id="password_2_user_error" class="error"></label>
    <br/>
     
    <br/> 
    <input type="submit" value="Send" id="send_data" />
     
</form>

Теперь напишем серверный скрипт — ajax_index.php, он будет использоваться для обработки данных. Вот его код:

// массив для хранения ошибок
$errorContainer = array();
// полученные данные
$arrayFields = array(
    'name_user' => $_POST['name_user'],
    'email_user' => $_POST['email_user'],
    'password_user' => $_POST['password_user'],
    'password_2_user' => $_POST['password_2_user']
);
 
// проверка всех полей на пустоту
foreach($arrayFields as $fieldName => $oneField){
    if($oneField == '' || !isset($oneField)){
        $errorContainer[$fieldName] = 'Поле обязательно для заполнения';
    }
}
 
// сравнение введенных паролей
if($arrayFields['password_user'] != $arrayFields['password_2_user'])
    $errorContainer['password_2_user'] = 'Пароли не совпадают';
 
// делаем ответ для клиента
if(empty($errorContainer)){
    // если нет ошибок сообщаем об успехе
    echo json_encode(array('result' => 'success'));
}else{
    // если есть ошибки то отправляем
    echo json_encode(array('result' => 'error', 'text_error' => $errorContainer));
}

И теперь осталось только написать javaScript. Он будет выглядеть вот так:

$(document).ready(function() {
    $('#form_test').submit(function(){
        // убираем класс ошибок с инпутов
        $('input').each(function(){
            $(this).removeClass('error_input');
        });
        // прячем текст ошибок
        $('.error').hide();
         
        // получение данных из полей
        var name_user = $('#name_user').val();
        var email_user = $('#email_user').val();
        var password_user = $('#password_user').val();
        var password_2_user = $('#password_2_user').val();
         
        $.ajax({
            // метод отправки 
            type: "POST",
            // путь до скрипта-обработчика
            url: "/ajax_test.php",
            // какие данные будут переданы
            data: {
                'name_user': name_user, 
                'email_user': email_user,
                'password_user': password_user,
                'password_2_user': password_2_user
            },
            // тип передачи данных
            dataType: "json",
            // действие, при ответе с сервера
            success: function(data){
                // в случае, когда пришло success. Отработало без ошибок
                if(data.result == 'success'){   
                    alert('форма корректно заполнена');
                // в случае ошибок в форме
                }else{
                    // перебираем массив с ошибками
                    for(var errorField in data.text_error){
                        // выводим текст ошибок 
                        $('#'+errorField+'_error').html(data.text_error[errorField]);
                        // показываем текст ошибок
                        $('#'+errorField+'_error').show();
                        // обводим инпуты красным цветом
                        $('#'+errorField).addClass('error_input');                      
                    }
                }
            }
        });
        // останавливаем сабмит, чтоб не перезагружалась страница
        return false;
    });
});

Вот и все. Ajax-форма с валидацией готова.

ПОЛЕЗНО  Создание контактной формы в PHP

источник