Comment afficher les messages du plugin jQuery Validate à l'intérieur des info-bulles Tooltipster?
Je voudrais utiliser le plugin Tooltipster pour afficher les erreurs de formulaire générées par le plugin jQuery Validate .
jQuery pour valider le plugin :
$(document).ready(function () {
$('#myform').validate({ // initialize jQuery Validate
// other options,
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
}
});
});
Plugin jQuery pour Tooltipster :
$(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>
Comment intégrer l'utilisation de ces deux plugins jQuery pour que des erreurs de validation apparaissent dans les info-bulles?
Les solutions pour les versions Tooltipster 2.1, 3.0 et 4.0 sont incluses dans cette réponse.
[~ # ~] notez [~ # ~] que .tooltipster() n'est attaché qu'à un élément type="text"input dans mes exemples ci-dessous. Si votre form contient d'autres types d'éléments d'entrée de données tels que type="radio", type="date", textarea, select, etc., alors vous doit ajuster votre sélecteur en conséquence ou créer des instances supplémentaires de .tooltipster() pour ces autres éléments. Sinon, tout échouera avec des erreurs.
Tooltipster v2.1
Tout d'abord, initialisez le plugin Tooltipster ( avec toutes les options ) sur tous les éléments form spécifiques qui afficheront des erreurs:
$(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
});
});
Deuxièmement, utilisez options avancées de Tooltipster avec les fonctions de rappel success: Et errorPlacement: Intégrées au plug-in Validate pour afficher et masquer automatiquement les info-bulles. comme suit:
$(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');
}
});
});
Démo de travail: http://jsfiddle.net/2DUX2
[~ # ~] edit [~ # ~] : Code mis à jour pour tirer parti des nouvelles fonctionnalités de l'API Tooltipster publiées dans la version 2.1 le 2/12/13
MISE À JOUR pour Tooltipster v3.0
Tooltipster 3.0 est sorti et en tant que tel ne fonctionne pas de la même manière que celui illustré ci-dessus. Le code suivant fournit un exemple mis à jour. Cette version a l'avantage supplémentaire de ne pas appeler Tooltipster à chaque frappe lorsque le message n'a pas encore changé.
( N'oubliez pas que vous devez encore attacher .tooltipster() à vos éléments input pertinents comme illustré ci-dessus.)
$(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 utilisant Tooltipster v3.0: jsfiddle.net/2DUX2/3/
MISE À JOUR pour Tooltipster v4.0
Notez que l'option onlyOne a été supprimée de la version 4.0 du plugin Tooltipster.
J'ai également remplacé le rappel success par unhighlight. Sur les champs "facultatifs", le message d'erreur n'a jamais été supprimé lorsque le champ a été par la suite effacé ... c'est parce que la fonction success ne se déclenche pas dans ces circonstances. Ce problème n'est pas isolé de Tooltipster version 4, mais le code suivant le résout à l'avenir.
// 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 utilisant Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/
La réponse de Sparky a été un élément essentiel de la validation de mon site, mais la mise à niveau vers Tooltipster 4 a nécessité quelques modifications. Voici comment j'ai fait fonctionner la mienne, et avec quelques améliorations.
Sur vos pages, incluez le tooltipster css et un theme css dans la section head (et tout css de thème avec lequel vous sous-classez leurs thèmes comme décrit sur sa page).
<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">
De plus, vous devez inclure le fichier javascript de tooltipster. Vous aurez également besoin du javascript de validation de requête.
<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>
Maintenant, dans un autre fichier javascript ou dans certaines balises de script, vous devrez mettre votre code de validation ainsi que votre code info-bulle. Voici celui d'une page Web que j'ai, les changements de la réponse de Sparky sont en haut.
$(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
......
}
});
});
Maintenant, lorsque vous tapez quelque chose dans un champ qui viole l'une des règles répertoriées, une fenêtre contextuelle apparaît au-dessus de la boîte indiquant ce que jquery-validate dit est incorrect. Il n'ouvrira pas non plus de message s'il n'y a rien dedans pour montrer à l'utilisateur (ce qui l'amènerait à ouvrir une info-bulle vierge puis à se fermer immédiatement, ce qui semble étrange).