изменить цвет фона поля на три секунды с помощью Jquery?

Question

Я новичок в jquery.У меня есть простая форма с четырьмя полями: Имя пользователя обязательно и должно быть длиной от 4 до 8 символов, Дата рождения должна быть датой, Адрес электронной почты требуется - должен быть действительным адресом электронной почты и Домашняя страница, которая должна быть действительным URL.Я написал эту часть в следующем коде.

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

$('form').validate();
$("#username").rules("add",{
minlength: 4,maxlength: 8,
messages:{
required: "Required input",minlength: jQuery.format("must be 4-8 characters")}
});

Answer 1

$('form').validate().submit(function(){
     setTimeout(function(){
          $(this).find('.error').removeClass('error');
     }, 3000);
});

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

$('form').validate({
      invalidHandler : function(form){
           setTimeout(function(){
               $(form).find('.error').removeClass('error');
           }, 3000);
      }
})

Answer 2

Чтобы получить недопустимые поля с желтым фоновым цветом, добавьте к вашему css:

.error{
    background: yellow;
}

.error - имя класса, данное недопустимым полям при проверке формы.Что касается тайм-аута для смены фона на белый, я пытался какое-то время безуспешно.Любые идеи будут высоко оценены.