Легко проверяйте ввод данных в любом браузере с помощью Validatr

Работа с формами в Интернете может быть очень интересной. Вы можете сделать много настроек в дизайне, на этикетке и даже в аутентификации. С множеством новых функций, доступных в HTML5, Джей Морроу создал Validatr, который полагается на новый HTML5 входные атрибуты выполнить простую и автоматическую проверку формы.

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

Пользовательские сообщения об ошибках также доступны с различными вариантами, используя атрибуты данных HTML5. Вы можете настроить элемент сообщения об ошибке с вашим собственным CSS, и у плагина есть несколько довольно хороших стилей CSS.

Основное руководство

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

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

Плагин распознает элемент формы, чтобы применить изменения.

HTML-разметка

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

Например, если вы хотите создать числовую форму, просто добавьте type = «number» во входные данные и некоторые дополнительные требования, например, ограничение минимального и максимального числа. Если пользователям не разрешено оставлять форму пустой, просто добавьте обязательный атрибут.

Ниже приведен базовый пример реализации:

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

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

Для получения полного списка других типов ввода и документации по атрибутам, пожалуйста, перейдите на Validatr страница,

            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>