—»     —»   Validatr: валидация формы ввода в любом браузере
  Раздел: Формы   Нет комментариев  

Validatr: валидация формы ввода в любом браузере



Иногда бывает невероятно интересно работать с формами на сайтах. Вы можете подстраивать их внешний вид под дизайн, использовать ярлыки и даже функционал авторизации. С появлением множества новых функций в HTML5, Jay Morrow сумел разработать Validator, основанный на новых HTML5-атрибутах ввода, которые позволили добиться автоматической валидации.

Validatr: валидация формы ввода в любом браузере

Validatr – это кросс-браузерный и бесплатный jQuery-плагин. Он автоматически оборачивает границу формы в красный цвет, если пользователь вводит неправильное значение. К тому же, он способен валидировать такие формы как email, телефонные номера, ссылки, диапазон и многое другое.

К тому же, у вас будет возможность использовать собственные сообщения об ошибках при помощи HTML5-атрибутов данных. Изменять оформление элементов с ошибками можно при помощи CSS-кода.

Базовые примеры

Чтобы использовать Validatr, включите последнюю версию jQuery и скрипт Validatr в ваш проект.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/validatr.js" type="text/javascript"></script>

Затем запустите плагин при помощи следующего сниппета:

<script>
jQuery(function ($) {
$('form').validatr();
});
</script>

Плагин распознает элементы form и применит к ним нужные изменения.

HTML-разметка

Как уже было отмечено, Validatr для работы использует элемент input. Элемент оборачивается внутрь тэга form. Элемент ввода позволяет использовать различные типы форм и принимает настройки посредством HTML5-атрибуты данных.

К примеру, если вы хотите создать форму для ввода чисел, просто добавьте type=”number” в элемент ввода, а также некоторые дополнительные значения вроде ограничения. Если пользователь не может оставить форму пустой, просто используйте нужный атрибут.

Далее приведен простой пример реализации:

<form action="./">
<label for="number">Number</label>
<div>
<input type="number" id='number' step=2 min=1 max=11 name="number" required>
<input type="submit" value="Submit">
</div>
</form>

Атрибут step используется для увеличения значений, когда пользователь кликает по соответствующим кнопкам в форме. Если значение выставлено на 0, то это значит, то он использует стандартное увеличение или увеличение только на одно число (значение должно быть положительным).

Validatr: валидация формы ввода в любом браузере

Предлагаем вам ознакомиться с тем, что происходит когда пользователь вводит неправильное значение или неподходящее число. В нашем примере 2 используется в качестве шага от начальной точки равной 1, то есть, значение можно увеличивать только по следующему принципу: 3, 5, 7 и так далее. Максимальным значением будет 11.

Validatr: валидация формы ввода в любом браузере

Если вам хочется ознакомиться с полным перечнем типов ввода и атрибутов, то вы можете перейти на главную страницу Validatr.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, отправные формы
Опубликовал Design FactoRy   Прочитано (раз): 3914   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031