Wie man Meldungen von jQuery anzeigt Validieren Sie das Plugin innerhalb von Tooltip-Tooltips?

Ich möchte das Tooltipster-Plugin verwenden , um Formularerrors anzuzeigen, die vom jQuery Validate-Plugin generiert wurden.

jQuery für Validate-Plugin :

$(document).ready(function () { $('#myform').validate({ // initialize jQuery Validate // other options, rules: { field1: { required: true, email: true }, field2: { required: true, minlength: 5 } } }); }); 

jQuery für das Tooltipster-Plugin :

 $(document).ready(function () { $('.tooltip').tooltipster({ /* options */ }); // initialize tooltipster }); 

HTML :

 

Wie würde ich die Verwendung dieser beiden jQuery-Plugins integrieren, so dass validationserrors in den Tooltips angezeigt werden?

   

Lösungen für Tooltipster-Versionen 2.1, 3.0 und 4.0 sind in dieser Antwort enthalten.

.tooltipster() dass .tooltipster() nur an ein input type="text" in meinen Beispielen unten angehängt ist. Wenn Ihr form andere Arten von Dateneingabeelementen wie type="radio" , type="date" , textarea , select usw. enthält, müssen Sie Ihren Selektor entsprechend anpassen oder zusätzliche Instanzen von .tooltipster() für diese anderen erstellen Elemente. Ansonsten wird alles mit Fehlern scheitern.


Tooltipter v2.1

Initialisieren Sie zunächst das Tooltipster-Plugin ( mit allen Optionen ) für alle spezifischen form , die Fehler anzeigen:

 $(document).ready(function () { // initialize tooltipster on form input elements $('#myform input[type="text"]').tooltipster({ trigger: 'custom', // default is 'hover' which is no good here onlyOne: false, // allow multiple tips to be open at a time position: 'right' // display the tips to the right of the element }); }); 

Zweitens, verwenden Sie die erweiterten Optionen von Tooltipster zusammen mit dem success: und errorPlacement: Callback-functionen, die in das Validate-Plugin eingebaut sind, um die Tooltips automatisch wie folgt errorPlacement: und auszublenden:

 $(document).ready(function () { // initialize validate plugin on the form $('#myform').validate({ // any other options & rules, errorPlacement: function (error, element) { $(element).tooltipster('update', $(error).text()); $(element).tooltipster('show'); }, success: function (label, element) { $(element).tooltipster('hide'); } }); }); 

Arbeitsdemo: http://jsfiddle.net/2DUX2

BEARBEITEN : Aktualisierter Code, um die neuen Tooltipster-API-functionen zu nutzen, die in Version 2.1 am 12.02.2013 veröffentlicht wurden



UPDATE für Tooltipster v3.0

Tooltipster 3.0 ist out und funktioniert als solches nicht wie oben dargestellt. Der folgende Code enthält ein aktualisiertes Beispiel. Diese Version hat den zusätzlichen Vorteil, Tooltipster nicht bei jedem Tastendruck aufzurufen, wenn sich die Nachricht noch nicht geändert hat.

( Vergessen Sie nicht, dass Sie .tooltipster() an Ihre relevanten input anhängen .tooltipster() wie oben dargestellt. )

 $(document).ready(function () { // initialize validate plugin on the form $('#myform').validate({ // any other options & rules, errorPlacement: function (error, element) { var lastError = $(element).data('lastError'), newError = $(error).text(); $(element).data('lastError', newError); if(newError !== '' && newError !== lastError){ $(element).tooltipster('content', newError); $(element).tooltipster('show'); } }, success: function (label, element) { $(element).tooltipster('hide'); } }); }); 

Demo mit Tooltipster v3.0: jsfiddle.net/2DUX2/3/



UPDATE für Tooltipster v4.0

Beachten Sie, dass die Option onlyOne aus der Version 4.0 des Tooltipster-Plugins entfernt wurde.

Ich ersetzte den success auch durch unhighlight . Bei “optionalen” Feldern wurde die Fehlermeldung nie entfernt, wenn das Feld später ausgeblendet wurde … weil die success unter diesen Umständen nicht ausgetriggers wird. Dieses Problem ist nicht auf Tooltipster Version 4 isoliert, jedoch triggers der folgende Code es vorwärts.

 // initialize Tooltipster on text input elements $('input[type="text"]').tooltipster({ //find more options on the tooltipster page trigger: 'custom', // default is 'hover' which is no good here position: 'top', animation: 'grow' }); // initialize jQuery Validate $("#myform").validate({ errorPlacement: function (error, element) { var ele = $(element), err = $(error), msg = err.text(); if (msg != null && msg !== '') { ele.tooltipster('content', msg); ele.tooltipster('open'); } }, unhighlight: function(element, errorClass, validClass) { $(element).removeClass(errorClass).addClass(validClass).tooltipster('close'); }, rules: { .... 

Demo mit Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/

Die Antwort von Sparky war für die validation meiner Site ein Grundpfeiler, aber ein Upgrade auf Tooltipster 4 erforderte einige Änderungen. Hier ist, wie ich meins arbeitete und mit ein paar Verbesserungen.

Fügen Sie auf Ihren Seiten den Tooltipp css und ein Thema css in den Kopfbereich ein (und ein beliebiges Thema css, von dem Sie seine Themen ableiten, wie auf der Seite beschrieben).

   

Zusätzlich müssen Sie die JavaScript-Datei von Tooltipster einbinden. Sie benötigen auch das jquery-validation javascript.

   

Nun müssen Sie entweder in einer anderen JavaScript-Datei oder in einigen Skript-Tags Ihren validationscode sowie Ihren Tooltipp-Code eingeben. Hier ist einer von einer Webseite, die ich habe, die Änderungen von Sparkys Antwort sind ganz oben.

 $(document).ready(function(){ $('#form input[type="text"]').tooltipster({ //find more options on the tooltipster page trigger: 'custom', // default is 'hover' which is no good here onlyOne: false, // allow multiple tips to be open at a time position: 'top', animation: 'grow', theme: ['tooltipster-light'] //put your themes here }); //form validation initialization $("#form").validate({ errorPlacement: function (error, element) { if (error[0].innerHTML != null && error[0].innerHTML !== "") { $(element).tooltipster('content', $(error).text()); $(element).tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML. } }, success: function (label, element) { var obj = $(element); if (obj.hasClass('tooltipstered') && obj.hasClass('error')) { $(element).tooltipster('close'); //hide no longer works in v4, must use close } }, rules: { // your rules ...... } }); }); 

Wenn Sie nun etwas in ein Feld eingeben, das gegen eine der aufgelisteten Regeln verstößt, erscheint oberhalb der Box ein Popup, das sagt, was jquery-validate sagt, ist falsch. Es wird auch keine Nachricht geöffnet, wenn nichts darin ist, um den Benutzer zu zeigen (was dazu führen würde, dass er einen leeren Tooltip öffnet und dann sofort schließt, was komisch aussieht).