Форма

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

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

 .label_desc < display: block; >.error < display: none; >.error_input 
      

Теперь напишем серверный скрипт — 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_index.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-форма с валидацией готова.

Источник

Форма с валидацией и отправкой на Ajax

Расскажу о форме отправки писем с валидацией и отправкой данных на Ajax. В конечном итоге нам нужно получить форму с проверкой на правильность вводимых данных «на лету» и отправкой данных без перезагрузки страницы.

Вот скриншот формы:

А вот скриншот той же формы, но с ошибками ввода:

Ссылка на скачивание и тестирование — внизу.

1. jquery1.10.min.js
2. jquery.form.validation.js
3. site.js
4. send.php
5. style.css
6. corner.gif
7. index.php
8. Начнем.

jquery.form.validation.js — «почти jQuery плагин» от Романа Янке;

site.js — тут я объединил все мною написанные скрипты, которые здесь использованы;

send.php — скрипт отправки данных из формы на почту;

style.css — стили для ошибок ввода;

corner.gif — уголок для оформления сообщения об ошибке валидации;

index.php — наш главный файл в котором расположена форма и объединены скрипты со стилями.

Сначала я покажу содержимое файлов, а затем все объясню.