<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Валидация формы на jQuery

Валидация формы на jQuery

На этом уроке мы научимся делать валидацию форм с помощью плагина jQuery Validate. Валидация формы - это проверка скриптом правильность (выполнение заданных условий) заполнения полей формы. В случае ошибок при заполнении, скрипт сообщает об этой ошибке и блокирует отправку формы получателю.

Официальный сайт плагина: https://jqueryvalidation.org/

Для демонстрации и настройки работы плагина, нам потребуется простая HTML форма. Это как раз тот случай, когда фреймворк Bootstrap будет очень полезен, позаимствуем уже готовый код симпатичной формы в разделе Components/Forms на сайте https://getbootstrap.com. Обратите внимание, где именно в HTML-коде подключены CDN для Bootstrap, jQuery и плагин jQuery Validate.

<!doctype html>
<html lang="ru">
<head>
  <title>Валидация формы на jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
  <div class="container">
   <div class="row justify-content-center">
    <div class="col-4">
     <h2>Валидация формы</h2>
      <hr>
  <form class="form" id="myForm" role="form">
  <div class="form-group">
  <label for="inputEmail">Введите email:</label>
  <input type="email" class="form-control" name="email" id="inputEmail" placeholder="Введите email">
  </div>
  <div class="form-group">
  <label for="inputName">Введите имя:</label>
  <input type="text" class="form-control" name="name" id="inputName" placeholder="Введите имя">
  </div>
  <button type="submit" class="btn btn-primary">Отправить</button>
  </form>
  </div>
  </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
</body>
</html>
Валидация формы на jQuery.

Вызываем на форму метод validate

Наша форма имеет id - "myForm", его и пропишем в параметрах. Метод validate принимает объект, в котором мы передаем значение rules (создаем правило) и у данного объекта перечисляем поля - input, которые будут использованы. У нас имеется два поля (input), имя первого - name="email", а второго - name="name", сделаем эти поля обязательными (required) для заполнения.

Зададим ещё одно правило для поля name - длина вводимых символов должна быть не меньше 5-ти.

$("#myForm").validate({
  rules: {
    email: {
      required: true,
      email: true
    },
    name: {
      required: true,
      minlength: 5
    }
  }
});

Давайте проверим, работает ли валидация полей, на прописанные правила. При отправке пустых полей, появляется сообщение: "This field is required.".

Валидация формы на jQuery.

При вводе длины имени меньше 5-ти символов, мы видим сообщение: "Please enter at least 5 characters".

Валидация формы на jQuery.

Как изменить текст выводимых сообщение? Просто запишем другое правило - messages. Теперь сообщения будут выводиться те, что мы задали.

messages: {
  email: {
    required: "Поле email обязательно для заполнения",
  },
  name: {
    required: "Поле имя обязательно для заполнения",
    minlength: jQuery.validator.format("Длина имени должна быть больше 5-ти символов")
  }
},

Функция submitHandler будет вызываться, когда валидация формы прошла успешно. Добавим следующий код:

submitHandler: function() {
    alert("Валидация успешна!");
  }

Введем в поля формы любой email и имя не менее 5-ти символов. После нажатия кнопки, выскакивает окно с текстом: "Валидация успешна!". Это значит, что форма прошла валидацию и все поля совпадают.

Валидация формы на jQuery.

Мы разобрали только самые главные параметры плагина jQuery Validate. Умение для верстальщика внедрять в проекты готовые плагины на jQuery - это большой плюс и мой видеокурс поможет вам в этом деле.


Весь код валидации формы на jQuery:

See the Pen jquery validate form by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.