Организуем проверку формы во время ее заполнения

/ 👁 34906

Бывало ли с Вами такое: Вы заполняете длинную форму, вроде бы все нормально, пытаетесь ее отправить и при отправке оказывается, что Вы где-то ошиблись. Теперь Вам нужно снова заполнять все поля формы из-за одной ошибки. Лично я в таких ситуациях начинаю сильно нервничать. Поэтому сегодня поговорим о том, как сделать, чтобы форма проверялась уже во время заполнения.
дополнительные материалы к урокам

демо версия урока

Верификация (процедура проверки правильности ввода информации) формы на стороне клиента помогает выявлять ошибки заполнения полей формы еще до начала ее отправки не сервер, что несомненно является очень удобной штукой (особенно если Ваша форма достаточно длинная, а пользователи ресурса немного нервные). Однако, сразу хочу сделать оговорку, что верификация на стороне клиента никоем образом не освобождает Вас от верификации на стороне сервера (это для Вашего же блага). В идеале – используйте и ту и другую.

Но давайте все-таки перейдем к созданию верификации на стороне клиента. Делать мы это будем при помощи JQuery и плагина Validation.

Проверка формы во время ее заполнения

1. Начнем мы, как обычно, с создания html-файла, в котором и пропишем код нашей формы. Я создам относительно длинную форму, в которой будут присутствовать различные поля, а также чекбоксы и радиокнопки. Делаю это для того, чтобы показать, как можно проверять разные типы информации.

Вот код html-файла:

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<title>Верификация формы</title>
<link rel="stylesheet" href="form.css">

</head>
<body>
	<div class="main">
	<h1>Регистрация</h1>
	<form action="#" method="post" name="signup" id="signup">
            <div>
	<label for="name" class="label">Имя</label>
	<input name="name" type="text" id="name" >
	</div>
	<div>
	<label for="email" class="label">Электронный адрес</label>
	<input name="email" type="text" id="email">
	</div>
	<div>
	<label for="password" class="label">Пароль</label>
	<input name="password" type="password" id="password">
	</div>
	<div>
        <label for="confirm_password" class="label">Подтвердите пароль</label>
     <input name="confirm_password" type="password" id="confirm_password">
	</div>
	<div><span class="label">Хобби</span>
	<input name="hobby" type="checkbox" id="sweeming" value="sweeming">
	<label for="sweeming">Плаванье</label>
	<input name="hobby" type="checkbox" id="reading" value="reading">
	<label for="reading">Чтение</label>
	<input name="hobby" type="checkbox" id="nothing" value="nothing">
	<label for="nothing">Ничего неделанье</label>
	</div>
	<div>
	<label for="dob" class="label">Дата рождения</label>
	<input name="dob" type="text" id="dob">
	</div>
	<div>
	<label for="country" class="label">Страна рождения</label>
	<select name="country" id="country">
	<option value="">--Выберите одну--</option>
	<option value="russia">Россия</option>
	<option value="ukraina">Украина</option>
	<option value="belorussia">Белоруссия</option>
	<option value="other">Другая</option>
	</select>
	</div>
	<div>
	<label for="comments" class="label">Комментарии</label>
	<textarea name="comments" cols="15" rows="5" id="comments"></textarea>
	</div>
	<div class="label">Вы хотите получать нашу рассылку? </div>
	<div>
	<input  type="radio" name="spam" id="yes" value="yes">
	<label for="yes">Да</label>
	<input type="radio" name="spam" id="definitely" value="definitely">
	<label for="definitely">Конечно</label>
	<input type="radio" name="spam" id="ofcurse" value="ofcurse">
	<label for="ofcurse">С удовольствием</label>
	</div>
	<div>
	<input type="submit" name="submit" id="submit" value="Отправить">
	</div>
           </form>
	</div>
</body>
</html>

 

Здесь каждый элемент формы заключен в отдельный тег div, будь то текстовое поле для ввода, блок радиокнопок, блок чекбоксов и т.д. Все остальное должно быть Вам понятно, если Вы когда-либо создавали формы в html.

В файле уже подключена таблица стилей, которую нам нужно создать, и в которой нужно прописать кое-какие основные стили, чтобы наша страница выглядела более или менее нормально.

2. Итак, создайте файл таблицы стилей. Я назову его «form.css» и помещу в тот же каталог, что и мой html-файл. Как я уже говорила, файл таблицы стилей уже подключен к html-файлу. Осталось прописать туда стили. Я не буду слишком изощряться со стилями, просто сделаю так, чтобы страница выглядела нормально, но Вы, конечно же, можете прописать такие стили, которые нравятся Вам.

После этого моя страничка будет выглядеть вот так:

body{width:960px; margin:0 auto; background:#699}
.main{width:600px; margin:0 auto; text-align:right; padding-right:400px;}
.main h1, label{font-family:Arial, Helvetica, sans-serif; color:#fff}
form div{margin-bottom:10px;}
.label{font-family:Arial, Helvetica, sans-serif; color:#333; font-weight:600

 

веб-форма для верификации

3. Теперь, для того, чтобы мы могли реализовать валидацию нашей формы, первым делом нужно подключить файл библиотеки jQuery и плагин Validation.

Эти файлы Вы можете найти в папке с исходниками (впрочем, как и все остальные файлы этого урока). Найдите в папке файлы «jquery-1.6.3.min.js» и «jquery.validate.min.js» и поместите их в свою папку.

Теперь вернитесь в html-файл и после подключения файла таблицы стилей подключите эти два файла, а также создайте свой файл javascript, в котором мы будем писать наш код и также подключите его (в примере у этого файла имя «form.js»).

<script src="jquery-1.6.3.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="form.js"></script>

 

4. Переходим в созданный нами файл «form.js» и пропишем там следующий код:

$(document).ready(function() {
 $('#signup').validate();   
});

 

Этими строчками мы говорим, что нужно подождать пока загрузиться документ, потом выбираем нашу форму по идентификатору и применяем плагин для верификации.

Однако, верификация не произойдет, пока мы не зададим кое-какие правила.

Для этого нам нужно вернуться в html-файл, найти код для поля ввода имени и добавить ему атрибуты «class» и «title». В атрибуте «class» мы сообщим плагину Validation о том, что это поле обязательно для заполнения (class=”required”), а в атрибуте «title» укажем то сообщение об ошибке, которое должен увидеть пользователь не заполнивший это поле.

Таким образом, измененное поле для ввода имени будет выглядеть вот так:

<input name="name" type="text" id="name" class="required" title="Введите Ваше имя">

 

А если мы оставим поле имени пустым и нажмем на кнопу «Отправить», то увидим следующее:

верификация поля для ввода имени

Пока что сообщение об ошибке выглядит немного криво, но в конце мы это поправим.

5. Найдите поле для ввода даты рождения и добавьте для него также атрибуты «class» и «title», чтобы оно выглядело следующим образом:

<input name="dob" type="text" id="dob" class="date required" title="Введите дату рождения в формате: 01/01/2000">

 

Здесь ошибка будет появляться если пользователь не ввел дату, либо ввел ее в неверном формате.

верификация поля даты

Также найдите код для открывающего тега «select» и пропишите для него атрибуты «class» и «title», чтобы сделать выбор обязательным.

<select name="country" id="country" class="required" title="Выберите страну">

 

верификация для тега select

6. Как видите все просто. Но давайте поговорим о такой ситуации, когда нужно два разных сообщения для одного поля. Например, пользователь может не ввести адрес электронной почты – и тогда нужно вывести одно сообщение, или ввести некорректный адрес – и тогда нужно вывести другое сообщение об ошибке. Так же дела обстоят и с паролем, например, пользователь может не ввести пароль вообще, или ввести меньшее число символов, чем требуется.

Давайте посмотрим, как мы можем выводить разные сообщения для разных случаев.

Для этого вернемся в файл «form.js» и немного преобразуем наш код.

Внутри круглых скобок функции «validate» поставим открывающую и закрывающую фигурные скобки. А между ними создаем объект «rules», который будет заполняться именами полей и методами верификации.

Между фигурными скобками объекта «rules» мы создадим объектную константу. Первая часть «email» является именем поля проверки (оно совпадает с именем поля в html-коде). А далее указываются два метода верификации: обязательность заполнения поля и соответствие формату электронного адреса.

Посмотрите на преобразованный код и, я думаю, Вам станет более понятно:

$(document).ready(function() {
 $('#signup').validate({
	rules:{
	email:{
		required:true,
		email:true	
		}
	}//конец rules
 });//конец validate  
});//конец ready

 

Если теперь мы попробуем ввести в форму электронный адрес неверного формата или не ввести его вообще, то увидим разные сообщения ошибок.

верификация e-mail

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

Для этого после закрывающей фигурной скобки объекта «rule» создадим еще один объект с именем «messages». Этот объект будет содержать сообщения, которые Вы пожелаете вывести при той или иной ошибке. Таким образом код примет следующий вид:

$(document).ready(function() {
 $('#signup').validate({
	rules:{
	email:{
		required:true,
		email:true	
		}
	},//конец rules
	messages:{
	email:{
	required: "Введите адрес электронной почты",
	email: "Вы ввели некорректный e-mail"	
	}
	}//конец messages
 });//конец validate    
});//конец ready

 

Если Вы попробуете отправить форму сейчас, намеренно допустив ошибку, то теперь увидите сообщение на русском языке, которое Вы сами и установили.

валидация формы на лету

7. То же самое можно проделать и для поля с паролем, установив условия, чтобы пароль был обязательно введен, и чтобы он был от 4 до 8 символов; а также для поля подтверждения пароля – чтобы значение совпадало со значением из поля пароля.

Для этого в «rules» после объектной константы «email» мы поставим запятую и создадим еще две объектные константы: одна для поля пароля, а вторая для поля подтверждения пароля. И также внутри указываем методы верификации: для поля пароля мы указываем, что оно должно быть обязательно заполнено и значение должно быть от 4 до 8 символов; для поля подтверждение пароля указываем, что его значение должно совпадать со значением в поле пароля.

Ниже приведен дополненный код для объекта «rules».

rules:{
	email:{
		required:true,
		email:true	
		},
	password:{
	    required:true,
		rangelength:[4,8]	
	},
	confirm_password:{
	equalTo:'#password'	
	}
	},//конец rules

 

Теперь, если мы проверим нашу страницу, заведомо введя не удовлетворяющие условиям данные, то увидим соответствующие сообщения.

верификация поля пароля

Но, опять же, Вы можете увидеть, что сообщения об ошибках на английском языке. Но мы уже знаем, как это исправить. Нам просто нужно добавить соответствующие объектные константы в объект «messages».
Ниже приведен дополненный код для этого объекта.

messages:{
	email:{
	required: "Введите адрес электронной почты",
	email: "Вы ввели некорректный e-mail"	
	},
	password:{
	required: "Вы не ввели пароль",
	rangelength:"Пароль должен содержать от 4 до 8 символов"	
	},
	confirm_password:{
	equalTo:"Пароли не совпадают"	
	}
	}//конец messages

 

А вот и результаты наших трудов:

верификация паролей. Вывод ошибок на русском языке

8. Мы уже научились проверять различные поля и даже выводить разные сообщения об ошибках в зависимости от типа ошибки. Осталось только проверить чекбоксы и радиокнопки.

Начнем с чекбоксов.

Сейчас Вы можете вернуться в Ваш html-файл, так как правила верификации мы будет прописывать в нем, путем присвоения атрибутов «class» и «title». Вы можете подумать, что эти атрибуты нужно прописать для всех элементов «input» наших чекбоксов (у нас их 3). Однако, достаточно прописать только для первого. В данном случае все чекбоксы имеют одинаковое имя (name=”hobby”), поэтому плагин Validation обрабатывает их как группу.

Итак, найдите html-код первого чекбокса и усовершенствуйте его следующим образом:

<input name="hobby" type="checkbox" id="sweeming" value="sweeming" 
                class="required" title="Выберите как минимум один вариант">

 

Если мы ничего не отметим, то увидим сообщение об ошибке (сейчас оно выглядеть некрасиво, но скоро мы это поправим).

верификация чекбоксов

Все тоже самое и для радиокнопок. Найдите код первой радиокнопки и дополните его.

<input  type="radio" name="spam" id="yes" value="yes" 
                class="required" title="Выберите один вариант">

 

верификация радиокнопок

9. Мы провели верификацию всех необходимых полей, выводим разные сообщения об ошибках и все работает очень неплохо. Теперь нужно немного доработать внешний вид сообщений.

Одной из проблем является то, что сообщения об ошибках в радиокнопках и чекбоксах выводятся перед ними, но нам нужно, чтобы они выводились в другом месте (желательно под ними). Для этого вернитесь в наш файл «form.js» и после закрывающей фигурной скобки для объекта «messages» поставьте запятую и добавьте следующий код:

errorPlacement:function(error,element){
	if(element.is(":radio")||element.is(":checkbox")){
	error.appendTo(element.parent());	
	}
	else{
	error.insertAfter(element);	
	}
	}//конец errorPlacement

 

Этот код проверяет, является ли элемент радиокнопкой или чекбоксом и, если является, то сообщения об ошибках помещаются в конец элемента, содержащего данный чекбокс или радиокнопку.

устанавливаем место для сообщений об ошибках

Уже лучше, но пока все равно не идеально. А для того, чтобы наши сообщения об ошибках выглядели соответствующим образом, откройте файл таблицы стилей «form.css» и добавьте следующие слили для сообщений об ошибках:

#signup label.error{
	font-size:0.8em;
	color:#F00;
	font-weight:bold;
	display:block;
	margin-left:215px;
}

 

А вот и результат:
проверка формы во время ее заполнения

Ну вот, пожалуй, и все! Если у Вас возникли какие-то затруднения, то откройте файлы в исходниках и посмотрите код. Если возникли еще какие-то вопросы, то пишите в комментариях (кстати, можете писать там и свои отзывы :).

А я будут с Вами прощаться. Урок сегодня получился немного длинный, но я надеюсь, что он был полезен.

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

Также жду Ваших комментариев.

Успехов Вам друзья и спасибо всем тем, кто дочитал до конца : )

Tags: ,

Leave a Reply