Валидация в JavaScript с помощью Valid8

Часто приходится «насыщать» интерфейсы с помощью JavaScript. В основном работаю через jQuery, всё нравится, но одна беда – валидация. Постоянно приходится изобретать «велосипед», искать в сети обрывки кода; а ведь хочется написать пару строчек без углубления в детали. Радость не заставила себя ждать: нашёл библиотеку Valid8 (произносится как validate), и, наконец, решил проблему написания кода валидации.

Как пользоваться

Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании jQuery «обрезков» из интернета. Чтобы подключить библиотеку, нужно зайти сюда и нажать заветный Download. Скачается архив, в котором особый интерес представляет файл jquery.valid8.js, его копируем в папку с js файлам нашего проекта и подключаем библиотеку в html:

<script src="/js/jquery-1.6.3.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.valid8.js" type="text/javascript" charset="utf-8"></script>

Допустим у нас есть форма:

<form><ul>
<li><input type="text" id="inputSome" /></li>
</ul></form>

Добавляем валидацию (по умолчанию только проверка обязательности заполения), передавая в качестве параметра строку с сообщением об ошибке. Работаем в стиле jQuery:

$('#inputSome').valid8("Заполни это поле!");

После того как поле получит фокус и вы из него выйдете не заполнив, объемлющий тег (в нашем случае li) получит класс стиля error.
Для визуализации ошибок добавим CSS в head нашего документа:

<style>
.error input { background:pink; }
</style>

Валидация готова. Все.

Возможности поинтереснее

Функционал Valid8 не ограничивается проверкой заполнения. Для серьёзной работы можно подключить регулярные выражения:

$('#inputSome').valid8({
        'regularExpressions': [
        { expression: /^.+$/, errormessage: 'Заполни это поле!'},
        { expression: /^[habr]+$/|>, errormessage: 'Вы можете использовать только символы h, a, b, r'}
        ]
});

Теперь в поле можно вводить только символы, соответствующие обоим регулярным выражениям. Первое запрещает оставлять поле пустым, а второе добавляет ограничение на ввод 4-мя символами: можно ввести habr, babr, habrahabr, или что-то производное, соответствующее выражению.

Ну и Ajax разумеется

Можно для валидации использовать сервер:

$('#inputSome').valid8({
     'ajaxRequests': [
         { url: '/ajax/validation/' }
     ]
 });

Теперь библиотека будет общаться с сервером для проверки вводимого значения (например, предупреждать о зарегистрированном логине). На сервер значение в поле передаётся через POST в параметре value. Сервер должен вернуть ответ в формате JSON:

{"valid": true, "message": "Отлично, такого пользователя ещё нет!"}

Можно совмещать валидацию по регулярным выражениям и серверу. Есть другие возможности: определение события, по которому происходит валидация, интервал проверки, js функции валидации.

Источники

Библиотека Valid8
Библиотека jQuery