Как за две минуты настроить базовую jQuery валидацию формы

Как за две минуты настроить базовую jQuery валидацию формы

От автора: из этого руководства Вы узнаете, как настроить базовую валидацию формы с помощью jQuery – на примере формы регистрации.

Мы будем использовать для валидации формы jQuery Validation Plugin. Основным принципом этого плагина является определение правил валидации и сообщения об ошибках для элементов HTML в JavaScript. Вот онлайн демонстрация того, что мы собираемся создать:

Шаг 1: Включите jQuery

Во-первых, нам нужно включить библиотеку jQuery. jQuery Validation Plugin был протестирован до версии jQuery 3.1.1, но демонстрационная версия в этой статье прекрасно работает с последней версией 3.4.1.

Вы можете использовать любой из следующих вариантов загрузки:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Загрузите его с jquery.com

Загрузите его с помощью Bower: $ bower install jquery

Загрузите его, используя npm или Yarn: $ npm install jquery или yarn add jquery

Используйте CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Создайте новый HTML-файл с именем index.html и включите jQuery перед закрывающим тегом body:

Шаг 2. Включите jQuery Validation Plugin

Выберите между:

Загрузкой из репозитория плагина на github

Загрузите его с помощью Bower: $ bower install jquery-validation

Загрузите его, используя npm: npm i jquery-validation

NuGet: Install-Package jQuery.Validation

Используйте CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Включите плагин после jQuery:

Шаг 3. Создайте HTML-форму

Для регистрации мы хотим получить следующую информацию о пользователе:

Имя

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Фамилия

Электронная почта

Пароль

Итак, давайте создадим форму, содержащую эти поля ввода:

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

Шаг 4. Стили формы

Создайте новый файл css/styles.css и включите его в разделе head HTML-файла:

Скопируйте следующие стили во вновь созданный файл:

Обратите внимание на стили для .error, которые будут использоваться для сообщений об ошибках валидации.

Шаг 5. Создайте правила валидации

Наконец, нам нужно инициализировать плагин валидации формы. Создайте новый файл js/form-validation.js и добавьте ссылку на него после тега script плагина:

Скопируйте следующий код во вновь созданный файл:

Заключение

Вот и все, вы это сделали! Теперь у вас есть понимание, как настроить валидацию формы с помощью jQuery. Помните, что это не заменяет валидацию на стороне сервера. Злоумышленник все еще может манипулировать или обходить правила валидации (например, с помощью инструментов разработчика браузера).

Автор: Maria Antonietta Perna

Источник: https://www.sitepoint.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

jQuery: основы

Изучите jQuery с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: