В этой статье я хочу показать пример работы с 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-форма с валидацией готова.