- → Программирование
- → JavaScript
- → Уроки
jQuery валидация форм и полей в реальном времени
Валидация полей с клиентской стороны – это то что должна иметь каждая форма, в этом нет сомнений. Во первых, пользователю не нужно ждать, тратить свои нервы. Во вторых, вы показываете, что беспокоитесь за своих посетителей. Посетителю очень приятно знать заранее, что он сделал не так.
В этом уроке, мы узнаем, как написать jquery валидацию форм в режиме реального времени. Если вы хотите увидеть, что у вас получиться, вы можете нажать «ДЕМО» и посмотреть.
Что мы сегодня узнаем?
- Как мы реализуем jquery валидацию?
- Структура проекта
- Пишем HTML
- Добавляем CSS
- Пишем jQuery валидацию формы
- Готовый продукт
- После слов
Как мы реализуем jquery валидацию?
Существует множество способов достичь этого, вот самые распространенные из них:
- Мы можем создать SPAN тег (в котором будет содержаться информация о валидации), рядышком с полем ввода, и дать ему определенный ID, через которого мы к нему обратимся.
- Мы можем обвернуть каждое поле в P тег, внутри которого создать SPAN, который будет содержать информацию о валидации поля.
- Также можно обвернуть поле P тегом, внутри которого «привыть» SPAN (на лету с помощью jquery).
Это все будет работать, но это не наилучший путь реализации. Почему? Потому, что слишком много лишнего HTML кода в форме ввода, который нам не нужен. Нужно соблюдать семантику кода.
Мы сделаем это так, как я сделал для себя. На мой взгляд, это наиболее правильное решение, хотя никто так не делает. Честно говоря, я никого не видел, кто бы еще так делал… если знаете, напишите мне в комментарии в конце урока.
Что же мы будем делать?
- Мы напишем простую форму, красивую и с чистым семантическим кодом, без лишних тегов.
- Так как люди заполняют каждое поле в отдельности, мы можем отследить и валидировать его на лету:
- Определить его позицию в окне (верхний левый угол)
- Определить его ширину
- Так мы будем знать, где находиться его окончание.
- Добавим информацию о валидации в DIV блоке с определенным ID, справа от конкретного поля. Также присвоим соответственные классы .correct или .incorrect.
Заметьте: это также приемлемо для людей не использующих JavaScript в своем браузере. Таковы будут валидированы на серверной стороне.
Структура проекта
Нам нужно будет создать три файла:
- index.html
- style.css
- validate.js
Мы рассмотрим все поэтапно… сначала HTML код, потом необходимые CSS стили, позже мы сфокусируемся на основном – jQuery скрипте валидации формы.
Пишем HTML
Разложим все по полочкам…
Шаг 1 – создаем базовый HTML код
Для начала, создайте файл index.html и вставьте в него этот базовый код. Вы видите, что подключаем jQuery файл внизу, перед validation.js, который содержит наш скрипт валидации.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Real-Time Form Validation Using jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="content"> </div><!-- content --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="validate.js" charset="utf-8"></script> </body> </html>
Шаг 2 – создаем форму, разделенную на три части
Мы создадим форму, состоящую из трех частей, чтобы увидеть как проводить валидацию разных полей ввода и чекеров. Для разделения мы используем FIELDSET и LABEL, для заголовков каждого раздела:
- Персональная информация (имя пользователя, день рождения, пол, транспортное средство).
- Email (поле ввода email пользователя).
- О себе (краткая информация о пользователе).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Real-Time Form Validation Using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<form id="jform" action="http://1stwebdesigner.com" method="post">
<fieldset>
<legend>Personal Info</legend>
</fieldset>
<fieldset>
<legend>Email</legend>
</fieldset>
<fieldset>
<legend>About You</legend>
</fieldset>
</form>
</div><!-- content -->
Шаг 3 – добавляем поля и кнопку подтвердить
Отлично, теперь создадим несколько полей ввода для нашей формы. Для нашего урока, мы специально отобрали несколько разных полей:
- Три поля INPUT (имя пользователя, дата рождения, email адресс).
- RADIO кнопки, для выбора пола.
- CHECKBOX для транспортных средств пользователя.
- TEXTAREA для информации о пользователе.
- BUTTON для кнопки «Подтвердить».
Мы будем обвертывать каждый LABLE и поле ввода в тег P, чтобы разделить на отдельные блоки. Теперь ваш финальный файл index.html будет выглядеть следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Real-Time Form Validation Using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<form id="jform" action="http://1stwebdesigner.com" method="post">
<fieldset>
<legend>Personal Info</legend>
<p>
<label for="fullname" class="block">Full name:</label>
<input type="text" name="fullname" id="fullname" />
</p>
<p>
<label for="birthday" class="block">Day of birth <small>(dd-mm-yyyy)</small>:</label>
<input type="text" name="birthday" id="birthday" />
</p>
<p>
<label class="block">I am:</label>
<input type="radio" name="gender" id="man" value="man" /> <label for="man">Man</label>
<input type="radio" name="gender" id="woman" value="woman" /> <label for="woman">Woman</label>
</p>
<p>
<label class="block">I own:</label>
<input type="checkbox" name="vehicle" id="car" /> <label for="car">car</label>
<input type="checkbox" name="vehicle" id="airplane" /> <label for="airplane">airplane</label>
<input type="checkbox" name="vehicle" id="bicycle" /> <label for="bicycle">bicycle</label>
<input type="checkbox" name="vehicle" id="ship" /> <label for="ship">ship</label>
</p>
</fieldset>
<fieldset>
<legend>Email</legend>
<p>
<label for="email" class="block">Email <small>([email protected])</small>:</label>
<input type="text" name="email" id="email" />
</p>
</fieldset>
<fieldset>
<legend>About You</legend>
<p>
<label for="about" class="block">Tell us a little bit about yourself:</label>
<textarea id="about" cols="50" rows="10"></textarea>
</p>
</fieldset>
<p>
<button type="submit" id="send">submit</button>
</p>
</form>
</div><!-- content -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="validate.js" charset="utf-8"></script>
</body>
</html>
Это может выглядеть немного страшновато, но это потому что много полей ввода в нашей форме. На самом деле, здесь нет ничего сложного. Сохраните ваш файл, и посмотрите в браузере, что получилось. Теперь немного украсим…
Добавляем CSS
Так как CSS стилизирование не основная тема сегодняшнего урока, мы не будем на этом останавливаться. Просто нам необходим этот CSS код, чтобы форма выглядела красиво и все блоки были на своих местах.
Создайте файл style.css, вставьте в него код ниже. Теперь форма с будущей jquery валидацией, выглядит потрясающе. Не так ли?
body {
background: #efefef;
margin: 0;
padding: 0;
border: none;
text-align: center;
font: normal 13px Georgia, "Times New Roman", Times, serif;
color: #222;
}
#content {
width: 500px;
margin: 0 auto;
margin-bottom: 25px;
padding: 0;
text-align: left;
}
fieldset {
margin-top: 25px;
padding: 15px;
border: 1px solid #d1d1d1;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
fieldset legend {
font: normal 30px Verdana, Arial, Helvetica, sans-serif;
text-shadow: 0 1px 1px #fff;
letter-spacing: -1px;
color: #273953;
}
input, textarea {
padding: 3px;
}
label {
cursor: pointer;
}
.block {
display: block;
}
small {
letter-spacing: 1px;
font-size: 11px;
font-style: italic;
color: #9e9e9e;
}
.info {
text-align: left;
padding: 5px;
font-size: 11px;
color: #fff;
position: absolute;
display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: -1px 1px 2px #a9a9a9;
-moz-box-shadow: -1px 1px 2px #a9a9a9;
box-shadow: -1px 1px 2px #a9a9a9;
}
.error {
background: #f60000;
border: 3px solid #d50000;
}
.correct {
background: #56d800;
border: 3px solid #008000;
}
.wrong {
font-weight: bold;
color: #e90000;
}
.normal {
font-weight: normal;
color: #222;
}
#send {
background: #3f5a81;
width: 100%;
border: 5px solid #0F1620;
font: bold 30px Verdana, sans-serif;
color: #fafafa;
text-shadow: 1px 1px 1px #0F1620;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
#send:hover {
background: #4d76b1;
border: 5px solid #253750;
color: #fff;
}
#send:active {
text-indent: -10px;
}
Пишем jQuery валидацию формы
Это наиболее интересная и увлекательная часть урока. Но для начала, нам необходимо подумать и описать основные моменты нашей работы. Нужно все спланировать.
Планируем
Перед тем как будем писать, задайте себе три вопроса:
- Что нам нужно от этого скрипта?
- Как мы хотим это сделать?
- Как мы этого добьемся?
Это понятно, мы хотим, чтобы скрипт проводил валидацию формы. Но как? Мы хотим, чтобы он делал это в режиме реального времени (когда пользователь завершит заполнение поля ввода) и при нажатии на кнопку «Подтвердить». Поэтому нам придется написать несколько функций: отдельно для каждого поля ввода и для всех форм (которая вызовется при нажатии кнопки «Подтвердить»).
Чтобы предотвратить повторение кода, нам нужно будет создать JavaScript объект для этого.
Что нам для этого нужно?
JS объект в нашем случае будет называться jVal, он будет содержать следующие методы:
- jVal.fullName
- jVal.birthDate
- jVal.gender
- jVal.vehicle
- jVal.email
- jVal.about
Переменная, которая будет содержать статус текущей ошибки - jVal.errors. И метод, который проверяет, существуют ли какие-то ошибки и подтверждает отправку формы или отклоняет. Если нашлись какие-то ошибки, направляет пользователя в начало формы, где он может заполнить все поля корректно.
Метод называется - jVal.sendIt
Теперь, мы можем приступить к разработке jQuery скрипта валидации форм. Когда мы напишем первый метод, далее все пойдет проще и быстрее.
Начинаем работу
Основа кода проста, абсолютно весь jquery код будет содержаться внутри этого синтаксиса:
$(document).ready(function(){
jVal = {
};
});
Валидация поля имени пользователя
Наш первый метод будет обрабатывать поле «имя пользователя». Вставьте его внутрь jVal объекта, как показано на примере:
var jVal = {
'fullName' : function() {
}
};
Теперь напишем несколько строк кода внутри метода. Просто вставьте их, далее мы рассмотрим что это значит:
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
Линия 1: Мы добавляем DIV блок в документ. Class info, придает некий стиль для блока, который определен в файле style.css, также делает его невидимым с помощью display:none; Нащет ID, это для того, чтобы иметь быстрый доступ к этому блоку и манипулировать ним с помощью jQuery. Этот DIV блок будет содержать информацию о валидации поля.
Линия 3: Пишем обращение к этому блоку в переменную, так как мы будем использовать его большое количество раз.
Линия 4: Так же как и в предыдущем случае, мы записываем подключение к полю fullname в переменную. Мы также будем использовать его много раз.
jQuery функция offset() возвращает текущую позицию элемента по отношению к документу. Возвращается в виде объекта, который содержит свойства top и left. Мы используем эту функцию для ele, чтобы определить позицию поля ввода.
Теперь допишем еще несколько строк…
nameInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
Как видите, мы начинаем оперировать со стилями блока nameInfo. Конкретно, мы устанавливаем его позицию справа от поля ввода. Для этого, мы подымаем на 3 пикселя вверх (2 строка кода), и двигаем на 15 пикселей справа от поля (3 строка кода).
Мы написали 50% первого метода, доведем дело до конца. Настало время определить, насколько корректно пользователь ввел данные и предпринять меры…
if(ele.val().length < 6) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
Выглядит не очень? Бояться нечего…
Линия 1: Проверяем, чтобы имя введенное пользователем не было менее 6 символов.
Линия 2: Устанавливаем переменную jVal.errors на true, так как мы определили, что имя пользователя слишком короткое. Мы будем использовать это далее.
Линия 3: Мы начинаем оперировать нашим nameInfo элементом (в котором выводим информацию). Для начала мы удаляем class correct, и присваиваем class error. Далее мы вставляем контент в nameInfo элемент, это информация о том, что имя должно быть длиннее 6 символов. И наконец то, мы делаем видимым наше сообщение для пользователя.
Линия 4: Мы начинаем оперировать нашим ele элементом (форма ввода имени пользователя). Удаляем класс normal и присваиваем wrong.
Линия 5: Если имя пользователя достаточно длинное, тогда…
Линия 6: Мы начинаем оперировать nameInfo элементом. Если присвоен класс error, удаляем его и присваиваем класс correct. Вставляем внутрь «птичку», чтобы понять что все ОК. И показываем сообщение для пользователя.
Линия 7: Оперируем ele элементом. Удаляем класс wrong, если он применен, и применяем класс normal.
Мы создали наш первый метод валидации! Пришло время протестировать его. Мы должны быть уверены, что наш метод вызовется, когда пользователь закончит вводить свое имя. Для реализации этого, нам необходимо прицепить событие к действию. Мы будем использовать функцию change(). Вставьте пример кода ниже, под jVal объектом:
$('#fullname').change(jVal.fullName);
Что это значит на человеческом языке: если пользователь изменяет значение поля «Full name» а потом заканчивает с этим, вызывается метод fullName, который проводит валидацию поля.
Теперь ваш файл validate.js должен содержать следующий код:
$(document).ready(function(){
var jVal = {
'fullName' : function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
nameInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 6) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
};
// bind jVal.fullName function to "Full name" form field
$('#fullname').change(jVal.fullName);
});
Валидация поля даты рождения
Теперь все пойдет быстрее. Нам просто нужно сделать копию fullName метода и внести некоторые изменения.
Теперь, скопируйте fullName метод, вставьте его ниже и переименуйте в birthdate. И сделайте следующие изменения:
- Всюду где встречается nameInfo, замените на birthInfo
- Вместо #fullname, используйте #birthday для переменной ele
- Вставьте этот шаблон регулярного выражения ниже выражения birthInfo.css():
var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;
- Наше прежнее if() выражения должно быть:
if(!patt.test(ele.val()))
- Сообщение к этому полю будет следующее: type in date in correct format
Вот как должен выглядеть birthdate метод, после внесения этих изменений:
'birthDate' : function (){
$('body').append('<div id="birthInfo" class="info"></div>');
var birthInfo = $('#birthInfo');
var ele = $('#birthday');
var pos = ele.offset();
birthInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
birthInfo.removeClass('correct').addClass('error').html('← type in date in correct format').show();
ele.removeClass('normal').addClass('wrong');
} else {
birthInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
С помощью регулярного выражения (14 строка), мы проверяем, чтобы дата была в формате 28-03-1987. В 16 строке, мы проверяем соответствие даты рождения пользователя с шаблоном регулярного выражения.
И конечно же, нам нужно прикрепить событие change() для поля даты рождения:
$('#birthday').change(jVal.birthDate);
Теперь мы имеем еще один работающий метод валидации формы на jQuery. Отличная работа!
Валидация поля стать
Опять скопируйте метод fullName, переименуйте его в gender и внесите следующие изменения:
- Все nameInfo переименуйте в genderInfo
- Вместо #fullname, примените #woman для переменной ele
- В выражении genderInfo.css(), переменную top измените на top: pos.top-10, и left на left: pos.left+ele.width()+60
- Наше выражение if() должно быть:
if($('input[name="gender"]:checked').length === 0)
- Сообщение пользователю будет: are you a man or a woman?
Вот как должен выглядеть метод gender, после изменений:
'gender' : function (){
$('body').append('<div id="genderInfo" class="info"></div>');
var genderInfo = $('#genderInfo');
var ele = $('#woman');
var pos = ele.offset();
genderInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+60
});
if($('input[name="gender"]:checked').length === 0) {
jVal.errors = true;
genderInfo.removeClass('correct').addClass('error').html('← are you a man or a woman?').show();
ele.removeClass('normal').addClass('wrong');
} else {
genderInfo..removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
В строке 14 мы проверяем сколько выбрано селекторов radio. Если 0, то пользователь ничего не выбрал, выводим сообщение об ошибке.
И как всегда, прикрепляем gender метод для radio кнопок:
$('input[name="gender"]').change(jVal.gender);
Валидация checkers – владение транспортом
Теперь скопируем gender методи и переименуем его в vehicle, внесем следующие изменения:
- Все genderInfo замените на vehicleInfo
- Вместо #woman, впишите #ship для ele.
- В vehicleInfo.css() выражении, значение left должно быть left: pos.left+ele.width()+40
- Наше выражение if() должно теперь быть:
if($('input[name="vehicle"]:checked').length <= 1)
- Сообщение для пользователя: I am sure you have at least two!
Вот как должен выглядеть этот метод, после изменений:
'vehicle' : function (){
$('body').append('<div id="vehicleInfo" class="info"></div>');
var vehicleInfo = $('#vehicleInfo');
var ele = $('#ship');
var pos = ele.offset();
vehicleInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+40
});
if($('input[name="vehicle"]:checked').length <= 1) {
jVal.errors = true;
vehicleInfo.removeClass('correct').addClass('error').html('← I am sure you have at least two!').show();
ele.removeClass('normal').addClass('wrong');
} else {
vehicleInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
В строке 14, мы определяем сколько транспортных средств выбрал пользователь. Если менее двух, выводим сообщение об ошибке. Если количество выбраных checkbox равно или менее 1, значит ошибка.
Опять цепляем этот метод к полю vehicle:
$('input[name="vehicle"]').change(jVal.vehicle);
Наверняка вы уже устали… Еще парочка методов, для полноценной jQuery валидации. Пришло время для email валидации.
Валидация поля Email
Скопируем метод birthdate, переименуем в email и внесем изменения:
- Все birthInfo поменяем на emailInfo
- Вместо #birthday, напишем #email в значении переменной ele
- Наше прежнее регулярное выражение, будет:
var patt = /^.+@.+[.].{2,}$/i;
- Сообщение пользователю: give me a valid email adress, ok?
Вот как будет выглядеть метод email, после внесения изменений:
'email' : function() {
$('body').append('<div id="emailInfo" class="info"></div>');
var emailInfo = $('#emailInfo');
var ele = $('#email');
var pos = ele.offset();
emailInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^.+@.+[.].{2,}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
emailInfo.removeClass('correct').addClass('error').html('← give me a valid email adress, ok?').show();
ele.removeClass('normal').addClass('wrong');
} else {
emailInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
В строке 14, регулярное выражение имеет следующее содержание: один или более символов до@, после также один или более символов, потом идет . после чего 2 или более символов. Вот пример валидного email: [email protected]
И как всегда, цепляем email метод к полю:
$('#email').change(jVal.email);
Валидация поля информации о пользователе
Для этого последнего метода, скопируйте fullName метод, переименуйте его в about и внесите изменения:
- Все nameInfo поменяйте на aboutInfo
- Вместо #fullname, впишите #about в значение переменной ele
- Наше прежнее выражение if() будет:
if(ele.val().length < 75)
- Сообщение в случае ошибки: come on, tell me a little bit more!
Вот как, должен выглядеть этот метод, после внесения изменений:
'about' : function() {
$('body').append('<div id="aboutInfo" class="info"></div>');
var aboutInfo = $('#aboutInfo');
var ele = $('#about');
var pos = ele.offset();
aboutInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 75) {
jVal.errors = true;
aboutInfo.removeClass('correct').addClass('error').html('← come on, tell me a little bit more!').show();
ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
} else {
aboutInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
Цепляем этот метод к полю:
$('#about').change(jVal.about);
Мы только что создали все методы для валидации на jQuery. Осталось сделать две вещи: написать последний метод sendIt, управлять submit действием при нажатии «Подтвердить» в форме.
Пишем метод sendIt
Этот метод будет вызваться после всех валидирующих методов, как последний, после клика на «Подтвердить». Он проверяет, существовали ли ошибки валидации. Хорошая новость, он проще от прежних:
'sendIt' : function (){
if(!jVal.errors) {
$('#jform').submit();
}
Если переменная jVal.errors не true, разрешаем отправку формы на сервер.
Управляем действием submit
Последнее что нам осталось, управлять действием submit кнопки. Это делается следующим образом:
$('#send').click(function (){
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
jVal.errors = false;
jVal.fullName();
jVal.birthDate();
jVal.gender();
jVal.vehicle();
jVal.email();
jVal.about();
jVal.sendIt();
});
return false;
});
Получаем отправляемый элемент, при событии click. Так как разные браузеры по разному воспринимают прокрутку к верху страницы, нам нужно пределить куда делать скроллинг (строка 2). Делаем скроллинг к верху (строка 3). Далее изменяем переменную jVal.errors на false, чтобы отправка данных произвелась успешно. Далее по очередности вызываем все валидационные методы. После чего возвращаем false, что значит, что мы предотвращаем отправку данных, до того как проверим их на валидность.
Готовый продукт
Теперь наш jQuery скрипт валидации формы завершен. Он выглядит следующим образом:
$(document).ready(function(){
var jVal = {
'fullName' : function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
nameInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 6) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'birthDate' : function (){
$('body').append('<div id="birthInfo" class="info"></div>');
var birthInfo = $('#birthInfo');
var ele = $('#birthday');
var pos = ele.offset();
birthInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
birthInfo.removeClass('correct').addClass('error').html('← type in date in correct format').show();
ele.removeClass('normal').addClass('wrong');
} else {
birthInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'gender' : function (){
$('body').append('<div id="genderInfo" class="info"></div>');
var genderInfo = $('#genderInfo');
var ele = $('#woman');
var pos = ele.offset();
genderInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+60
});
if($('input[name="gender"]:checked').length === 0) {
jVal.errors = true;
genderInfo.removeClass('correct').addClass('error').html('← are you a man or a woman?').show();
ele.removeClass('normal').addClass('wrong');
} else {
genderInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'vehicle' : function (){
$('body').append('<div id="vehicleInfo" class="info"></div>');
var vehicleInfo = $('#vehicleInfo');
var ele = $('#ship');
var pos = ele.offset();
vehicleInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+40
});
if($('input[name="vehicle"]:checked').length <= 1) {
jVal.errors = true;
vehicleInfo.removeClass('correct').addClass('error').html('← I\'m sure you have at least two!').show();
ele.removeClass('normal').addClass('wrong');
} else {
vehicleInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'email' : function() {
$('body').append('<div id="emailInfo" class="info"></div>');
var emailInfo = $('#emailInfo');
var ele = $('#email');
var pos = ele.offset();
emailInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^.+@.+[.].{2,}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
emailInfo.removeClass('correct').addClass('error').html('← give me a valid email adress, ok?').show();
ele.removeClass('normal').addClass('wrong');
} else {
emailInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'about' : function() {
$('body').append('<div id="aboutInfo" class="info"></div>');
var aboutInfo = $('#aboutInfo');
var ele = $('#about');
var pos = ele.offset();
aboutInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 75) {
jVal.errors = true;
aboutInfo.removeClass('correct').addClass('error').html('← come on, tell me a little bit more!').show();
ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
} else {
aboutInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'sendIt' : function (){
if(!jVal.errors) {
$('#jform').submit();
}
}
};
// ====================================================== //
$('#send').click(function (){
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
jVal.errors = false;
jVal.fullName();
jVal.birthDate();
jVal.gender();
jVal.vehicle();
jVal.email();
jVal.about();
jVal.sendIt();
});
return false;
});
$('#fullname').change(jVal.fullName);
$('#birthday').change(jVal.birthDate);
$('input[name="gender"]').change(jVal.gender);
$('input[name="vehicle"]').change(jVal.vehicle);
$('#email').change(jVal.email);
$('#about').change(jVal.about);
});
После слов
Мы это сделали! Ладно, вы это сделали! Надеюсь вам понравился этот урок и вы выучили что-то новое. Если вы имеете вопросы по поводу jQuery валидации, задайте их в комментариях. Благодарю вас за внимание и ваш интерес к нашему сайту! Успехов вам.
Источник материала ...
Дальше: jQuery портфолио: красивое портфолио на jQuery + CSS3
Development — Taras Moroz