—»     —»   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   Прочитано (раз): 3441   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


www.podmoscvoy.ru
База Рыба Зверь. Деревянные дома. Ресторан. Все удобства для отдыха
podmoscvoy.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728