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, то это значит, то он использует стандартное увеличение или увеличение только на одно число (значение должно быть положительным).
Предлагаем вам ознакомиться с тем, что происходит когда пользователь вводит неправильное значение или неподходящее число. В нашем примере 2 используется в качестве шага от начальной точки равной 1, то есть, значение можно увеличивать только по следующему принципу: 3, 5, 7 и так далее. Максимальным значением будет 11.
Если вам хочется ознакомиться с полным перечнем типов ввода и атрибутов, то вы можете перейти на главную страницу Validatr.