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

Дата публикации: 2020-05-12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

NuGet: Install-Package jQuery.Validation

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

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

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

1 2	<!-- 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="john@doe.com"/>

    <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>

<h2>Registration</h2>

<label for="firstname">First Name</label>

<label for="email">Email</label>

<label for="password">Password</label>

<button type="submit">Register</button>

</form>

</div>

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

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

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

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

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

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

@import url("//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;
}

@import url("//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>

1	<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();
    }
  });
});

// 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

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

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

Метки: jquery