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

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

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

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

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

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

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

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery/dist/jquery.min.js"></script>

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

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

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

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

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

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

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

<div class="container"> <h2>Registration</h2> <form action="" name="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" id="email" placeholder="[email protected]"/> <label for="password">Password</label> <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"/> <button type="submit">Register</button> </form>
</div>

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

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

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

<link rel="stylesheet" href="css/style.css"/>

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

@import url("https://fonts.googleapis.com/css?family=Open+Sans"); /* Styles */
* { margin: 0; padding: 0;
} body { font-family: "Open Sans"; font-size: 14px;
} .container { width: 500px; margin: 25px auto;
} form { padding: 20px; background: #2c3e50; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
form label,
form input,
form button { border: 0; margin-bottom: 3px; display: block; width: 100%;
}
form input { height: 25px; line-height: 25px; background: #fff; color: #000; padding: 0 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
form button { height: 30px; line-height: 30px; background: #e67e22; color: #fff; margin-top: 10px; cursor: pointer;
}
form .error { color: #ff0000;
}

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

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

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

<script src="js/form-validation.js"></script>

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

// Wait for the DOM to be ready
$(function() { // Initialize form validation on the registration form. // It has the name attribute "registration" $("form[name='registration']").validate({ // Specify validation rules rules: { // The key name on the left side is the name attribute // of an input field. Validation rules are defined // on the right side firstname: "required", lastname: "required", email: { required: true, // Specify that email should be validated // by the built-in "email" rule email: true }, password: { required: true, minlength: 5 } }, // Specify validation error messages messages: { firstname: "Please enter your firstname", lastname: "Please enter your lastname", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, email: "Please enter a valid email address" }, // Make sure the form is submitted to the destination defined // in the "action" attribute of the form when valid submitHandler: function(form) { form.submit(); } });
});

Заключение

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

Автор: Maria Antonietta Perna

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

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