Абсолютно каждый владелец сайта использует на своём сайте как минимум одну форму. Это может быть форма обратной связи или форма комментирования, не так важно. При отправке формы, как правило, необходимо проверить данные, правильно ли они были введены. Например, правильно ли был введен email адрес. Обычно проверка происходит когда мы нажимаем на кнопку «Отправить», и затем следует перезагрузка страницы, после чего, если данные неверны, выводится сообщение об ошибке. НО! В этом уроке мы рассмотрим как сделать проверку формы на сайте без перезагрузки страницы.
Проверка заполнения формы
Для проверки формы мы будем использовать jQuery библиотеку — Validatr(скачать).
Как сделать проверку формы у себя на сайте?
HTML
Как выглядит работа данного плагина можно посмотреть ниже, а также скачать работающее демо:
Смотреть примерСкачать
Первым делом между тегами <head> подключим необходимые библиотеки(библиотеку jQuery и Validatr):
1 2 | <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="js/validatr.js" type="text/javascript"></script> |
Затем вызовем функцию плагина с помощью кода:
1 2 3 4 5 | <script> jQuery(function ($) { $('form').validatr(); }); </script> |
Данный код должен быть размещен также между тегами <head> </head>. То есть плагин сам распознает элемент формы на сайте.
Для правильной работы плагина Validatr, тег <input> должен быть заключен в тег <form>. И плагин будет обрабатывать различные условия, которые находятся в HTML5 атрибутах. Легче это понять на примере. Например, если вы хотите чтобы текстовое поле принимало только текстовые значения, то необходимо указать ему атрибут type="number", в таком же стиле задается минимальное и максимальное значение поля.
Возьмем к примеру следующую форму:
1 2 3 4 5 6 7 | <form action="./"> <label for="number">Число</label> <div> <input type="number" id='number' step=2 min=1 max=11 name="number" required> <input type="submit" value="Отправить"> </div> </form> |
Атрибут step используется для определения шага. То есть вы нажимаете на стрелочку вверх:
Вот здесь мы можем проверить работу нашего валидатора. Ниже представлены примеры сообщений если ввести буквы или оставить поле пустым (выведется первое сообщение) и, в случае, если ввести четную цифру (вы увидите второе сообщение).
Вывод
Валидация полей — это крайне необходимая вещь на любом сайте. А валидация без перезагрузки полей является более привлекательной для посетителя, т.к. не нужно ждать перезагрузки страницы, а сразу можно увидеть ошибки.
Успехов!
С Уважением, Юрий Немец
Источник: http://www.hongkiat.com/blog/validate-form-inputs-validatr/