¿Cómo mostrar mensajes del complemento jQuery Validate dentro de la información sobre herramientas de Tooltipster?
Me gustaría utilizar el complemento Tooltipster para mostrar los errores de formulario generados por el complemento jQuery Validate .
jQuery para el complemento Validar :
$(document).ready(function () {
$('#myform').validate({ // initialize jQuery Validate
// other options,
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
}
});
});
jQuery para el complemento 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>
¿Cómo integraría el uso de estos dos complementos de jQuery para que aparezcan errores de validación dentro de la información sobre herramientas?
En esta respuesta se incluyen soluciones para las versiones 2.1, 3.0 y 4.0 de Tooltipster.
NOTA que .tooltipster()solo se adjunta a un type="text" inputelemento en mis ejemplos a continuación. Si formcontiene otros tipos de elementos de entrada de datos como type="radio", type="date", textarea, selectetc., entonces debe ajustar su selector en consecuencia o crear instancias adicionales de .tooltipster()para estos otros elementos. De lo contrario, todo fallará con errores.
Información sobre herramientas v2.1
Primero, inicialice el complemento Tooltipster ( con cualquier opción ) en todos los elementos específicos formque mostrarán errores:
$(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
});
});
En segundo lugar, utilice las opciones avanzadas de Tooltipster junto con las success:funciones errorPlacement:de devolución de llamada integradas en el complemento Validar para mostrar y ocultar automáticamente la información sobre herramientas de la siguiente manera:
$(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');
}
});
});
Demostración funcional: http://jsfiddle.net/2DUX2
EDITAR : Código actualizado para aprovechar las nuevas funciones de la API Tooltipster lanzadas en la versión 2.1 el 12/02/13
ACTUALIZACIÓN para Tooltipster v3.0
Tooltipster 3.0 ya está disponible y, como tal, no funciona igual que se ilustra arriba. El siguiente código proporciona un ejemplo actualizado. Esta versión tiene el beneficio adicional de no llamar a Tooltipster cada vez que se presiona una tecla cuando el mensaje aún no ha cambiado.
( No olvide que aún debe adjuntar .tooltipster()los inputelementos relevantes como se ilustra arriba ) .
$(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');
}
});
});
DEMOSTRACIÓN usando Tooltipster v3.0: jsfiddle.net/2DUX2/3/
ACTUALIZACIÓN para Tooltipster v4.0
Tenga en cuenta que la onlyOneopción se eliminó de la versión 4.0 del complemento Tooltipster.
También reemplacé la successdevolución de llamada con unhighlight. En los campos "opcionales", el mensaje de error nunca se eliminó cuando el campo se borró posteriormente... esto se debe a que la successfunción no se activa en estas circunstancias. Este problema no se limita a Tooltipster versión 4; sin embargo, el siguiente código lo resuelve en el futuro.
// 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: {
....
DEMOSTRACIÓN usando Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/
La respuesta de Sparky ha sido un elemento básico en la validación de mi sitio, pero la actualización a Tooltipster 4 requirió algunos cambios. Así es como hice que el mío funcionara y con algunas mejoras.
En sus páginas, incluya el CSS de información sobre herramientas y un CSS de tema en la sección principal (y cualquier CSS de tema con el que subclase sus temas como se describe en su página).
<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">
Además, debe incluir el archivo javascript del informante sobre herramientas. También necesitarás el javascript de validación 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>
Ahora, ya sea en otro archivo javascript o en algunas etiquetas de script, deberá ingresar su código de validación y su código de información sobre herramientas. Aquí hay uno de una página web que tengo, los cambios de la respuesta de Sparky están en la parte superior.
$(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
......
}
});
});
Ahora, cuando escribe algo en un campo que viola una de las reglas enumeradas, aparece una ventana emergente encima del cuadro que dice que lo que dice jquery-validate es incorrecto. Tampoco abrirá un mensaje si no hay nada en él para mostrarle al usuario (lo que haría que abriera una información sobre herramientas en blanco y luego se cerrara inmediatamente, lo que parece extraño).
