Come visualizzare i messaggi da jQuery Convalida il plug-in all'interno dei tooltipster di Tooltipster?

Question

Mi piacerebbe utilizzare lo Tooltipster plugin per visualizzare gli errori di modulo generati dallo jQuery Validate plugin.

jQuery per convalidare plug:

$(document).ready(function() { 

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

}); 

jQuery per Tooltipster plug:

$(document).ready(function() { 

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

}); 

HTML:

<form id="myform"> 
    <input type="text" name="field1" /> 
    <input type="text" name="field2" /> 
    <br/> 
    <input type="submit" /> 
</form> 

Come integrare l'utilizzo di questi due plug-in jQuery in modo che gli errori di convalida vengano visualizzati nelle descrizioni dei comandi?

Answer 1

Le soluzioni per le versioni Tooltipster 2.1, 3.0, & 4.0 sono incluse in questa risposta.

NOTA che .tooltipster() riguarda solo un elemento type="text"input nei miei esempi qui sotto. Se il vostro form contiene altri tipi di elementi di input dati come type="radio", type="date", textarea, select, ecc, quindi è necessario regolare il selettore di conseguenza o creare ulteriori istanze di .tooltipster() per questi altri elementi. Altrimenti, tutto fallirà con errori.

---

Tooltipster v2.1

In primo luogo, inizializzare il plugin Tooltipster (with any options) su tutti specifiche form elementi che visualizzeranno gli errori:

$(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 
    }); 

}); 

In secondo luogo, utilizzare Tooltipster's advanced options lungo con il success: and errorPlacement: callback functions built into the Validate plugin per mostrare e nascondere automaticamente le descrizioni comandi come segue:

$(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'); 
     } 
    }); 

}); 

lavoro Demo: http://jsfiddle.net/2DUX2

EDIT: codice aggiornato per sfruttare le nuove funzioni API Tooltipster rilasciato nella versione 2.1 su 2/12/13

---

---

UPDATE per Tooltipster v3.0

Tooltipster 3.0 è fuori servizio e come tale non funziona come illustrato sopra. Il codice seguente fornisce un esempio aggiornato. Questa versione ha il vantaggio di non chiamare Tooltipster su ogni tasto quando il messaggio non è ancora cambiato.

(Non dimenticare che hai ancora bisogno di collegare .tooltipster() ai vostri rilevanti input elementi come sopra illustrato.)

$(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 utilizzando Tooltipster v3.0: jsfiddle.net/2DUX2/3/

---

---

UPDATE per Tooltipster v4.0

Si noti che l'opzione onlyOne è stata rimossa dalla versione 4.0 del plug-in Tooltipster.

Ho anche sostituito la richiamata success con unhighlight. Nei campi "opzionali", il messaggio di errore non è mai stato rimosso quando il campo è stato oscurato successivamente ... perché la funzione success non viene attivata in queste circostanze. Questo problema non è stato isolato in Tooltipster versione 4, tuttavia il codice seguente risolve il problema.

// 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 utilizzando Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/

Answer 2

risposta di Sparky è stato un fiocco sulla convalida del mio sito, ma l'aggiornamento a Tooltipster 4 richiesto alcune modifiche. Ecco come ho ottenuto il mio lavoro, e con alcuni miglioramenti.

Sulle tue pagine, includi il css di tooltipster e un css di tema nella sezione di testa (e qualsiasi css di tema che sottoclassi i loro temi con quello descritto nella sua pagina).

<link rel="stylesheet" type="text/css" href="/styles/tooltipster.bundle.css"> 
<link rel="stylesheet" type="text/css" href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css"> 

Inoltre, è necessario includere il file javascript di tooltipster. Avrai anche bisogno del javascript di validazione jquery.

<script src="/js/tooltipster.bundle.min.js"></script> 
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> 

Ora, sia in un altro file JavaScript o in alcuni tag di script, è necessario inserire il codice di convalida e il codice tooltipster. Eccone uno da una pagina web che ho, i cambiamenti dalla risposta di Sparky sono in cima.

$(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 
      ...... 
     } 
    }); 

}); 

Ora, quando si digita qualcosa in un campo che viola una delle regole elencate, un popup viene in su sopra la casella di dire ciò jquery-validate dice è sbagliato. Inoltre non aprirà un messaggio se non c'è nulla in esso da mostrare all'utente (il che porterebbe ad aprire un suggerimento vuoto e quindi a chiuderlo immediatamente, il che sembra strano).