Как анимировать повление ошибок?

Question

Cейчас они появляются резко,

а не плавно (с анимацией)

$(function() {

  
  $("form[name='registration']").validate({
    rules: {
      firstname: {
        required: true,
      },
      
      lastname: {
        required: true,
      },
    
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});

/* Styles */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}
 .error {
   display: block;
    color: red;
  }
  
  input {
    display: block;
  };
  
  .item {
    margin-bottom: 10px;
  }

<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">

    <div class="item">
      <label for="firstname">First Name</label>
      <input type="text" name="firstname" data-msg="некорректное имя" id="firstname" placeholder="John">
    </div>
   

    <div class="item">
      <label for="lastname">Last Name</label>
      <input type="text" data-msg="некорректная фамилия" name="lastname" id="lastname" placeholder="Doe">
    </div>

    <button type="submit">Register</button>
  </form>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

Answer 1

В браузерах давно есть свои валидаторы, предлагаю воспользоваться ими. Например, для ваших данных можно задать паттерн /[А-яёЁ]{2,20}/, что соответствует кириллическим символам от 2 до 20, плюс добавить атрибут required. В title описываем требование к полю. И браузер сам выдает стилизованное сообщение.

Для e-mail или url есть уже предустановленные валидаторы, надо указать только соответствующие атрибуты type. Для телефонов нужно задать паттерн вручную, например, вида: pattern="[+]{1}7 [0-9]{3}-[0-9]{3}-[0-9]{4}" для схемы +7 XXX-XXX-XXXX.

Попробуйте, работает ли это как вам надо...

<h2>Registration</h2>
<form action="" name="registration">

  <div class="item">
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" data-msg="некорректное имя" id="firstname" placeholder="Василий" required pattern="[А-яёЁ]{2,20}" title="Кириллица от 2 до 20 символов">
  </div>


  <div class="item">
    <label for="lastname">Last Name</label>
    <input type="text" data-msg="некорректная фамилия" name="lastname" id="lastname" placeholder="Пупочкин" required pattern="[А-яёЁ-]{2,40}" title="Кириллица или '-' от 2 до 40 символов">
  </div>

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

БЛОГ НА HUSL

Как анимировать повление ошибок?

Ответы (1 шт):