Анимация сообщений об ошибках для jQuery Validate

Question

Использование плавной анимации для сообщений об ошибках плагина jQuery Validation довольно легко сделать, когда появляется сообщение с первым. Однако после выполнения начального обратного вызова errorPlacement я не знаю, как сохранить анимирование сообщения, поскольку пользователь продолжает изменять ввод.

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

ТЛ; др:

Я хочу, чтобы сообщения об ошибках всегда исчезают и появляются, а не мигает.

JSFiddle example

HTML

<form id="contactForm" class="form-horizontal" autocomplete="off"> 
    <fieldset> 
    <h4 style="margin-bottom: 20px; margin-top: 20px;" class="text-center">Contact us today for a free thing</h4> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-user bigicon" aria-hidden="true" title="Name"></i></span> 
     <div class="col-xs-9"> 
     <input type="text" name="Name" placeholder="Name" class="form-control hps-text-box"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-envelope-o bigicon" title="Email address"></i></span> 
     <div class="col-xs-9"> 
     <input type="text" name="Email" placeholder="Email address" class="form-control hps-text-box"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-phone-square bigicon" title="Phone number"></i></span> 
     <div class="col-xs-9"> 
     <input type="text" placeholder="Phone number (eg. 123-456-7890)" class="form-control hps-text-box"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-pencil-square-o bigicon" title="Enter your message for us here."></i></span> 
     <div class="col-xs-9"> 
     <textarea name="UserMessage" rows="7" placeholder="Enter your message for us here. We will get back to you within 2 business days." class="form-control hps-text-box"></textarea> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-md-12 text-center"> 
     <button id="submitButton" type="submit" class="btn btn-primary" autocomplete="off">Submit</button> 
     </div> 
    </div> 
    </fieldset> 
</form> 

JavaScript

$(document).ready(function() { 
    $("#contactForm").validate({ 
    rules: { 
     Name: "required", 
     Email: { 
     required: true, 
     email: true 
     }, 
     UserMessage: "required", 
     Phone: { 
     phoneUS: true 
     } 
    }, 
    messages: { 
     Name: "Please provide your name", 
     Email: "Please enter a valid email address", 
     UserMessage: "Please enter a message" 
    }, 
    errorElement: "div", 
    errorClass: "jqval-error", 
    errorPlacement: function(error, element) { 
     error.insertAfter(element); 
     error.slideDown(400); 
     error.animate({ opacity: 1 }, { queue: false, duration: 700 }); 
    }, 
    submitHandler: function(form) { 
     alert("Form submitted"); 
    } 
    }) 
}); 

CSS

input, 
select, 
textarea { 
    max-width: none; 
} 

.hps-text-box { 
    margin-left: 10px; 
} 

.bigicon { 
    font-size: 34px !important; 
} 

div.jqval-error { 
    display: none; 
    opacity: 0; 
    margin-left: 18px; 
    color: #f39200; 
    font-weight: bold; 
} 

Answer 1

Это не тривиальный запрос. вам придется потратить значительное количество времени на изучение the docs и играть с различными функциями обратного вызова, такие как errorPlacement, success и т.д. Также смотрите ответ на подобное поведение с помощью Tooltipster плагина: stackoverflow.com/a/14741689/594235

Сообщения проверки устанавливаются display: none плагином, прежде чем вы сможете получить контроль над ними. Нет никаких параметров плагина, обратных вызовов, методов или перехватчиков, которые позволят вам сделать что-то после успешной проверки, но также до того, как сообщение будет удалено и ярлык будет скрыт.

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

---

EDIT:

The showErrors callback даст вам карту ошибок и список ошибок, где вы будете иметь доступ к тексту каждой ошибки и соответствующего входного элемента. Примечание: просто используя этот обратный вызов, сообщения об ошибках по умолчанию также будут подавлены (хорошо для ваших целей). Еще некоторые усилия, но, возможно, это проще, чем изобретать колесо.