Валидация форм с jQuery.

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



Первое, что нам необходимо - подключить validationEngine на нашу страницу. Для этого, скачаем отсюда необходимые файлы. И подключим их на нашу страницу.

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

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

$(document).ready(function() {
 $("#formID").validationEngine();
})

На этом часть касающаяся js закончена. Теперь добавим class к элементам формы которые должны приойти валидацию. В качестве примера добавим к элементу следующие правила
1) не пустой
2) валидный email

<input class="validate[required,custom[email]]" ... />

Всё, теперь при отпрвке формы, если пользователь оставил поле пустым или ввёл некорректный email адрес, ему выведется сообщение.
Давайте немного детальнее рассмотрим какие опции добступны в validationEngine

• required: поле обязательно для заполнения
• length[0,100] : кол-во символов разрешено между x и x.
• maxCheckbox[7] : макс. кол-во выбранных checkbox элементов в группе
• minCheckbox[7] : мин. кол-во выбранных checkbox элементов в группе
• confirm[fieldID] : совпадение полей (удобно для повторяющихся полей - passwrod etc.)
• telephone : проверят введён ли телефонный номер.
• email : проверяет введен ли email.
• onlyNumber : разрешает вводить только числа
• noSpecialCaracters : запрещает вводить спец. символы
• onlyLetter : толко буквы
• exemptString : не проводит валидацию если строка совпадает
• date : проверят дату. Дата должна быть форматом YYYY-MM-DD.
• funcCall : собственная функция валидации.

Как мы видим реализовано множество основных типов валидации, а так же есть возможность добавить свои!

Немного о локализации. Все сообщения которые выводятся при ошибке храняться в jquery.validationEngine-fr.js файле, это даёт нам возможность локализировать этот файл для любого языка и в зависимости от выбранной локали пользователем подключать нужный!

Вывод сообщений об ошибках. По умолчанию сообщения выводятся сверху поля, но существует возможность изменить эту опцию. Допустимые значени - topLeft, topRight, bottomLeft, centerRight, bottomRight. Давайте установим вывод сообщений об ошибке справа от поля:

$("#formID").validationEngine({
  promptPosition: "centerRight" 
});

Собственные функции валидации. Добавить свою функцию валидации очень просто! Давайте добавим к полю нашу кастомную функцию к элементу формы - customValid

<input class="validate[funcCall[customValid]] ...  />

Теперь добавим сообщение об ошибке в файл локализации

"customValid":{
         "name":"customValidcustomValid",
         "alertText":"* Message ... "}
     }

И наконец создадим саму функцию для валидации

function customValid(){
   //выполняем валидацию
}

Всё!
На этом я заканчиваю. Есть ещё много интересных плюшек, которые возможно реализовать с помощью validationEngine. О них вы сможете прочитать тут.

Протестировано в

• Internet Exploder 6+
• Firefox 3+
• Safari 4
• Chrome 1+

Демо версия

Спасибо за то, что прочитали! Happy coding!