Январь 7, 2020 Запись была обновлена
Проверка заполнения формы на сайте
Абсолютно каждый владелец сайта использует на своём сайте как минимум одну форму. Это может быть форма обратной связи или форма комментирования, не так важно. При отправке формы, как правило, необходимо проверить данные, правильно ли они были введены. Например, правильно ли был введен 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/
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Эм.. Это статья о валидации форм? Не хочу никого обидеть, но ссылка на документацию плагина была бы более информативна, нежели убогие 20 строк текста с не менее убогим примером валидации чисел…. Остальные статьи можно даже не смотреть
Владимир, вы думаете что каждый будет смотреть документацию плагина (ссылка в начале статьи) на английском языке? Намного легче взять что-то готовое и переделать под себя 🙂 .
➡
Спасибо за статью. Очень полезная.