Я сегодня написал свой первый плагин на jQuery, чем и хочу с вами поделиться. Новички, возможно, подчерпнут для себя что-то, знатоки поправят меня, где можно сделать лучше. Для тех, кто совсем не понимает в jQuery, но очень хочет - даю ссылку на , по которому сам разбирался в этой библиотеке. А так же ссылку на , и , которые мне помогли в изучении.
Начнем уже.
Для того, чтобы наш плагин мог быть вызван, как объект jQuery надо объявить его следующим образом:
jQuery.fn.validForm = function(userOptions) { //пишем код тут }
userOptions - в данном случае пользовательские опции. А настраивать пользователь сможет контейнер для вывода сообщения о том, что не все поля были заполнены правильно и стиль этого контейнера.
var options = { errorContainer: "#errorList" }
После чего переписываем эти опции пользовательскими.
$.extend(options, userOptions);
Добавляем так же стиль для оформления полей ввода, в которых есть ошибки (красная обводка в 2 пикселя и светло-красный фон). Добавляем методом append в тег <head>
$('head').append("<style>.inputError{border: 2px solid #F00; background: #FAA;}</style>");
Вот так это будет выглядеть
Теперь у нас заданы основные настройки, пора переходить к активным действиям. В jQuery программист оперирует не столько отдельными элементами, сколько их коллекциями, поэтому мы должны учитывать, что в наш плагин может быть передана не одна форма для валидации, а несколько. Для этого воспользуемся функцией each для перебора всех входных данных. Данные у нас помещаются в переменной $(this).
$(this).each( function() { var id = "#" + $(this).attr('id'); if ($(id + " input").length > 0) { Validate(id); } else { return false; } });
Как видите, для каждого полученного объекта мы объявили переменную id, состоящую из '#' и атрибута 'id' объекта. Тем самым мы получили id, который для использования в других функциях jQuery. В третьей строчке мы берем объект с именем id и всех его потомков, являющимися input'ами, и если их не 0, то применяем функцию Validate, которую опишем позже, а иначе возвращаем false. (Если вам что-то непонятно в этой записи - прочитайте самый первый материал, указанный в статье.) Суть всей предыдущего куска кода - применить функцию Validatе ко всем переданным в плагин формам, у которых есть поля ввода. Далее идет собственно функция, так сказать "сердце" этого плагина.
function Validate(form) { //дальше пишем код тут }
form - имя формы, которую будем проверять.
$(form + " input[@type=submit]").click(function() {});
Объявляем обработчик нажатия на кнопку submit. Внутри нее сначала объявляем счетчик ошибок:
var errorAmount = 0;
А затем и коллекцию элементов, которые будем проверять.
var collection = $(form + " input[@type=text]") .add(form +" input[@type=password]") .add(form +" input[@type=file]") .add(form +" textarea") .add(form +" select");
Функция add добавляет к уже найденным элементам еще множество. Таким образом, в переменной collection у нас собраны все поля ввода текста, пароля, селекты и текстарии. Для каждого элемента коллекции сначала для простоты определяем элемент в переменную element, его длину length. Если длина у нас false (то есть равна 0) мы добавляем css-класс этому элементу (этот класс мы выше добавили в <head>), увеличиваем счетчик ошибок на 1. В случае же правильного заполнения поля - убираем красную обводку для поля ввода.
collection.each(function() { var element = $(this); var length = $.trim(element.attr('value')); if (!length) { element.addClass('inputError'); errorAmount++; } else { element.removeClass('inputError'); } });
Для большего комфорта мы добавим обработчики изменения в наши поля. Если пользователь нажимает клавишу (то есть начинает вводить текст) мы сразу убираем обводку, однако если он стер, все, что ввел - возвращаем ее назад.
collection.keypress( function (){ $(this).removeClass('inputError'); }); collection.change( function() { if (($(this).attr('value')).length < 1) { $(this).addClass('inputError'); } else { $(this).removeClass('inputError'); } });
Теперь у нас есть количество ошибок в форме, а все поля с ошибками выделены красным. Осталось вывести сообщение пользователю о том, что он забыл ввести что-либо.
if (errorAmount) { $(options.errorContainer).html('Заполните пожалуйста правильно выделенные поля'); $(options.errorContainer).show(); return false; } else { $(options.errorContainer).hide(); }
Заполняем указанный в опциях контейнер текстом и показываем. А если все заполнено правильно - скрываем. Вот собственно и все. Просто и полезно.
Теперь о том, как это можно использовать.
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.validform.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#myForm').validForm({errorContainer: '#errors'}); }); </script>
Не забудьте вставить в код контейнер с id="errors".
Готовый код можно скачать .
А рабочий пример посмотреть .
А еще я писал про:
Ноябрь 11th, 2008 at 16:52
Как для первого плагина – то весьма неплохо.
Ноябрь 22nd, 2008 at 06:54
а если у меня несколько полей не обязательны к заполнению, тогда как тут??
в вашем примере я вижу что должны быть заполнены все поля
Ноябрь 23rd, 2008 at 13:10
Привет, тезка) Да, в моем примере надо заполнять все поля. Однако я планирую посвятить еще один пост этому плагину. Допишу «правила» по которым не все поля буду обязательными, можно будет задавать регулярные выражения для проверки полей. Задержка вызвана тем, что сейчас рабочая необходимость находится в другой области) То есть работаю сейчас не с jquery.
Декабрь 8th, 2008 at 17:48
Познавательно) Вот только до яваскрипта я все никак не доберусь.