На этом шаге мы рассмотрим пример использования этого виджета.
Материал этого шага базируется на http://2develop.ru/jquery/proverka-poley-s-pomoshtyyu-jquery.html и http://www.linkexchanger.su/2008/46.html#more-46.
Еще одно расширение Йерна Зафферера (Jorn Zaefferer), Validation, представляет собой чрезвычайно гибкий инструмент проверки содержимого полей ввода формы на основе разнообразных критериев.
Адреса, где можно взять компонент: http://archive.plugins.jquery.com/project/validate/ или http://bassistance.de/jquery-plugins/jquery-plugin-validation/.
Как обычно, сначала потребуется подключить библиотеку jQuery (jQuery Validation работает с версией 1.2.2 и выше). Понятно, что понадобится и jquery.form.js, и собственно query.validate.js – все это подключаем в разделе HEAD нужной страницы. Можно подключить и файл additional-methods.js, содержащий, как ясно из названия, дополнительные методы.
<script src="js/jquery-1.9.0.js" type="text/javascript"></script> <script src="js/jquery.validate.min.js" type="text/javascript"></script> <script src="js/jquery.form.js" type="text/javascript"></script> <script src="js/additional-methods.js" type="text/javascript"></script>
Стилевые таблицы и HTML-код сможно посмотреть ниже.
. . . .
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
background-color:#FFF;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
form {
margin-left:25px;
}
input, textarea, select {
display:block;
width:250px;
float:left;
margin-left:10px;
margin-bottom:15px;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
textarea {
height:50px;
}
label {
position:relative;
display:block;
text-align:right;
float:left;
width:105px;
padding-right:5px;
}
label em {
position:absolute;
right:-260px;
top:-15px;
font-size:.8em;
color: #f00;
padding: 1px;
}
br {
clear:left;
}
.cb, .rb {
width:1em;
}
#reset, #submit {
width:87px;
margin-left:60px;
margin-top:10px;
}
#output {
background-color:#F0B80D;
height:25px;
overflow:hidden;
padding:5px;
margin-bottom:15px;
}
</style>
. . . .
</head>
<body>
<div id="output">Регистрационная форма.</div>
<form id="myForm" action="" method="post">
<label for="Name">Имя: (*)<em></em></label>
<input id="Name" name="Name" type="text" value="" /><br />
<label for="Email">E-mail: (*)<em></em></label>
<input id="Email" name="Email" type="text" value="" /><br />
<label for="Url">URL:<em></em></label>
<input id="Url" name="Url" type="text" value="" /><br />
<label for="Colors">Select: (*)<em></em></label>
<select id="Colors" name="Colors">
<option value=""></option>
<option value="red">Красный</option>
<option value="orange">Оранжевый</option>
<option value="yellow">Желтый</option>
<option value="green">Зеленый</option>
<option value="blue">Голубой</option>
<option value="deepblue">Синий</option>
<option value="violet">Фиолетовый</option>
</select><br />
<label for="Text">Textarea: (*)<em></em></label>
<textarea id="Text" name="Text" rows="1" cols="20"></textarea><br />
<label for="Password">Пароль: (*)<em></em></label>
<input id="Password" name="Password" type="password" /><br />
<label for="ConfirmPassword">Еще раз: (*)<em></em></label>
<input id="ConfirmPassword" name="ConfirmPassword" type="password" /><br />
<label for="Avatar">Файл:<em></em></label>
<input id="Avatar" name="Avatar" type="file" /><br />
<label for="Agree">Чекбокс (*)<em></em></label>
<input class="cb" id="Agree" name="Agree" type="checkbox" /><br />
<label for="Radio">Радио: (*)<em></em></label>
<input class="rb" type="radio" name="Radio" value="1" />
<input class="rb" type="radio" name="Radio" value="2" />
<input class="rb" type="radio" name="Radio" value="3" /><br />
<label for="Examine">6 + 7 = (*)<em></em></label>
<input id="Examine" name="Examine" type="text" value="" /><br />
<input id="reset" type="reset" name="resetButton" value="Reset" />
<input id="submit" type="submit" name="submitButton" value="Submit" />
</form>
. . . .
Отметим, что стоит следовать следующим рекомендациям по разметке.
Каждый элемент input или select имеет «свой» элемент label с атрибутом for, значение которого одинаково со значением атрибута id соответствующего элемента input или select:
<label for="Name">Имя: (*)<em></em></label> <input id="Name" name="Name" type="text" value="" /><br />
Теперь приведем JavaScript-код:
$(document).ready(function(){
$("#myForm").validate({
focusInvalid: false,
focusCleanup: true,
rules: {
Name: {
required: true,
minlength: 2,
maxlength: 12
},
Email: {
required: true,
email: true
},
Text: {
required: true,
maxlength: 24
},
Password: {
required: true,
rangelength: [6, 24]
},
ConfirmPassword: {
required: true,
rangelength: [6, 24],
equalTo: "#Password"
},
Agree: "required",
Url: {
url: true
},
Radio: "required",
Avatar: {
accept: "jpg|gif|png"
},
Colors: {
required: true
},
Examine: {
required: true,
equal: 13
}
},
messages: {
Name: {
required: "Укажите свое имя, пожалуйста!",
minlength: "Не менее 2 символов",
maxlength: "Не более 12 символов"
},
Email: {
required: "Нужно указать email адрес",
email: "Email адрес должен быть корректным"
},
Text: {
required: "Напишите сообщение, пожалуйста!",
maxlength: "Не более 24 символов"
},
Password: {
required: "Укажите пароль!",
rangelength: "Пароль - от 6 до 24 символов"
},
ConfirmPassword: {
required: "Подтвердите пароль!",
rangelength: "Пароль - от 6 до 24 символов",
equalTo: "Подтверждение пароля не принято!"
},
Agree: "Соглашайтесь или уходите!",
Url: {
url: "Введите корректный URL"
},
Radio: "Нужно сделать выбор...",
Avatar: {
accept: "jpg, gif или png"
},
Colors: {
required: "Выбирайте цвет"
},
Examine: {
required: "Надо решить этот пример!",
equal: "Вы в школе учились?"
}
},
errorPlacement: function(error, element) {
var er = element.attr("name");
error.appendTo( element.parent()
.find("label[for='" + er + "']").find("em") );
}
});
// ---- Форма -----
});
Вот внешний вид формы:
Рис.1. Результат работы скрипта
В этом коде самое интересное для нас это, пожалуй, основной метод – validate,
$("#myForm").validate({
// список опций
});
Приведем наиболее востребованные опции с пояснениями:
- submitHandler – вызывает обработчик для передачи формы, когда форма корректно заполнена. Заменяет собой передачу
формы по умолчанию, например, когда используется передача данных через метод ajaxSubmit() плагина jQuery Form.
- ignore – отменяет проверку полей формы с указанным селектором. В примере ниже – отменяет проверку для всех
элементов с классом ignore.
$("#myform").validate({ ignore: ".ignore" }); - rules – пары ключ/значение, описывающие правила проверки. Ключ – это значение атрибута name элемента (или
группы элементов для элементов checkbox и radio). Значение – объект (или строка), содержащий пары правило/параметр.
Правила могут быть считаны еще и из разметки (классы, атрибуты, метаданные). Эти способы можно комбинировать между собой.
$(".selector").validate({ rules: { // поле name - обязательное name: "required", // для поля email email: { // заполнение обязательно required: true, // значение должно быть корректным email: true } } }); - messages – пары ключ/значение, описывающие сообщения в процессе проверки. Ключ – это значение атрибута name элемента
(или группы элементов для элементов checkbox и radio). Значение же его будет отображено для соответствующего элемента.
$(".selector").validate({ rules: { name: "required", email: { required: true, email: true } }, messages: { // если не заполнено поле name // пользователь увидит сообщение name: "Пожалуйста, представьтесь!", email: { // если не заполнено поле email // пользователь увидит сообщение required: "Нужно указать e-mail!", // если поле email некорректно // пользователь увидит сообщение email: "E-mail должен быть корректным!" } } }); - onsubmit, onfocusout, onkeyup, onclick – отвечают за инициализацию проверки полей формы по соответствующему событию.
По умолчанию все установлены в true. Любые из этих опций можно отключить, установив значение false.
- errorPlacement – функция, принимающая два аргумента. Первый – ошибка, как объект jQuery, второй – некорректный
элемент, как объект jQuery. С помощью этой опции сообщение об ошибке может быть выведено в целевой элемент в разметке страницы. Давайте разберем на примере:
errorPlacement: function(error, element) { var er = element.attr("name"); error.appendTo( element.parent() .find("label[for="" + er + ""]") .find("em") ); }В переменную er получаем значение атрибута name элемента, в котором обнаружена ошибка. Сообщение об ошибке добавляем в целевой элемент, который еще надо найти. Находим «родителя» этого элемента, в нем обнаруживаем элемент label с атрибутом for, который имеет значение точно такое же, которое у нас уже хранится в переменной er (помните рекомендации по разметке?), находим в нем целевой элемент em. Вот туда и будет вставлен текст сообщения об ошибке.
На следующем шаге мы рассмотрим методы этого виджета.
