Как я могу анимировать метку ошибки с плагином проверки jquery

Question

Кажется, это очень простой вопрос, но я думаю, что часы просмотра кода заставили меня изо всех сил пытаться найти решение

Я использую плагин jQuery Validation и хочу анимировать отображение метки ошибки. Это возможно? Если так, то как?

Я осмотрелся, но решение, похоже, намекает на меня!

Заранее спасибо !!!

Answer 1

Предыдущий ответ не является полностью правильным.

Функция errorPlacement вызывается только один раз для каждой ошибки.Если вы включаете и выключаете эту ошибку - jquery.validate вызывает только hide и show и highlight и unhighlight.

Так что вам нужно два дополнения:

Сначала добавьтеопция анимации для выделения:

 highlight: function (element, errorClass, validClass) {
    $(element).parent().find('.help-block') //your error placement
       .slideDown(300); //animation
 }

Во-вторых, если вы хотите анимацию для скрытия сообщения, вы не можете использовать 'unhighlight' и 'slideUp', потому что jquery.validate напрямую вызывает 'hide' до завершения анимации.

Итак, вам нужно переопределить стандартную логику jquery.validate:

jQuery.validator.prototype.hideErrors = function() {
     this.addWrapper( this.toHide ).slideUp(300);
}

Answer 2

Пример:

$("#yourform").validate({
rules: {  

Your rules

 },
 messages:{

Your messages

 },
 errorPlacement: function(error, element){
 if ( element.is(":radio") || element.is(":checkbox")){
error.insertAfter(element.parent()).animate({opacity: 0.25, left: '+=50'});
} else { 
error.insertAfter(element).animate({opacity: 0.25, left: '+=50'});
}
   }

});