Animieren der Fehlermeldungen für jQuery Validieren

Question

Die Verwendung einer glatten Animation für die Fehlermeldungen des jQuery-Validierungs-Plugins ist relativ einfach, wenn die Meldung first erscheint. Nachdem der erste Rückruf ausgeführt wurde, weiß ich jedoch nicht, wie die Nachricht weiter animiert werden kann, wenn der Benutzer die Eingabe ändert.

In diesem Beispiel expandiere und verblasse ich die Fehlermeldungen, wenn/wenn sie zum ersten Mal erscheinen. Danach möchte ich die Fehlermeldungen weiterhin ein- und ausblenden, je nachdem, ob sie gültig sind oder nicht. Aber nur die Standardfunktionalität, bei der die Nachrichten schnell erscheinen/verschwinden (was nicht sehr visuell ansprechend ist) funktioniert für mich.

tl; dr:

möchte ich die Fehlermeldungen immer in und aus eher verblassen als zu blinken.

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

Dies ist keine triviale Anforderung. zu stackoverflow.com/a/14741689/594235

Die Überprüfungsmeldungen sind gesetzt: Sie werden eine beträchtliche Menge an Zeit the docs und Spielen mit den verschiedenen Callback-Funktionen wie errorPlacement, success usw. Siehe auch diese Antwort für ein ähnliches Verhalten mit Tooltipster Plugin ausgeben, um zu studieren display: none durch das Plugin, bevor Sie die Kontrolle erlangen können, um sie zu manipulieren. Es gibt keine Plug-in-Optionen, Callbacks, Methoden oder Hooks, mit denen Sie nach der erfolgreichen Überprüfung etwas tun können, aber auch bevor die Nachricht entfernt und das Label ausgeblendet wird.

Grundsätzlich müssen Sie einige der Funktionen & Methoden der Tooltipster neu erstellen, in dem Sie den Text der Nachricht irgendwo extrahieren und speichern und sich vollständig auf Fehler & Erfolg behandeln.

---

EDIT:

The showErrors callback wird Ihnen eine Fehlerkarte und Fehlerliste, wo Sie Zugriff auf den Text eines jeden Fehler und das entsprechende Eingabeelement haben werden. Hinweis: Mit diesem Callback werden auch die Standardfehlermeldungen unterdrückt (gut für Ihre Zwecke). Noch ein wenig Aufwand, aber vielleicht ist das einfacher, als das Rad neu zu erfinden.