Валидация формы обратной связи с помощью Javascript

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

Подключаем 3 библиотеки:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js

HTML

<form class="form" id="main_form" action="javascript:void(0);" autocomplete="off">
  <div class="form-row input-field">
    <input id="first_name" type="text" class="input" name="FirstName">
    <label for="first_name">Имя</label>
  </div>
  <div class="form-row input-field">
    <input id="last_name" type="text" class="input" name="LastName">
    <label for="last_name">Фамилия</label>
  </div>
  <div class="form-row input-field">
    <input id="your_email" type="email" class="input" name="email">
    <label for="your_email">Email</label>
  </div>
  <div class="form-row input-field">
    <input id="your_phone" type="tel" class="input" name="Phone">
    <label for="your_phone">Телефон</label>
  </div>
  <div class="form-row input-field">
    <input id="your_password" type="password" class="input password" name="password" autocomplete="new-password">
    <label for="your_password">Пароль</label>
  </div>
  <div class="form-row form-row-btn">
    <button class="submit" id="submit" type="submit" name="submit">Отправить</button>
  </div>
</form>

CSS

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

.form {
  width: 480px;
  max-width: 100%;
  margin: 20px auto;
  padding: 40px;
  border-radius: 10px;
  background-color: #dee8f7;
}

.input-field {
  position: relative;
  margin-bottom: 30px;
}

.input {
  font-family: Arial, sans-serif;
  font-size: 1.125rem;
  color: #000;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  transition: 0.4s;
}

.input.error {
  border-color: #ee294e;
  background-color: #fde9ed;
}

.submit {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.125rem;
  width: 100%;
  height: 75px;
  background-color: #00e676;
  color: #000;
  text-align: center;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  outline: none;
  transition: 0.4s;
}
.submit:hover {
  background-color: #00a454;
  color: #fff;
}

.input-field > label {
  font-family: Arial, sans-serif;
  color: #000000;
  position: absolute;
  top: 0;
  left: 14px;
  font-size: 1.125rem;
  cursor: text;
  text-align: initial;
  transition: transform 0.2s ease-out, color 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transform-origin: 0% 100%;
  transform: translateY(16px);
}

.input-field > label.active {
  transform: translateY(-22px) scale(0.8);
  transform-origin: 0 0;
  color: #9e9e9e;
}

.form label.error {
  color: #ee294e !important;
  transform: none !important;
  font-size: 13px;
  line-height: 1.1;
  margin-top: 4px;
  display: inline-block;
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
}

JS

$(function() {
  
  /*  validate form  */
  $("form").each(function() {
    $(this).validate({
      rules: {
        FirstName: {
          required: true,
          minlength: 3
        },
        LastName: {
          required: true,
          minlength: 3
        },
        email: {
          required: true,
          email: true
        },
        Phone: {
          required: true
        },
        password: {
          required: true,
          minlength: 5
        }
      },
      messages: {
        FirstName: {
          required: "Имя не может быть пустым",
          minlength: jQuery.validator.format("Введите не менее {0} символов.")
        },
        LastName: {
          required: "Фамилия не может быть пустым",
          minlength: jQuery.validator.format("Введите не менее {0} символов.")
        },
        email: {
          required: "Email не может быть пустым",
          email: "Неверный формат Email"
        },
        Phone: {
          required: "Телефон не может быть пустым"
        },
        password: {
          required: "Пароль не может быть пустым",
          minlength: jQuery.validator.format("Введите не менее {0} символов")
        }
      }
    });
  });
  /*  validate form  */
});

Рабочий пример:

See the Pen Validate form by JS by Denis (@deniscreative) on CodePen.