Hola como estan todos bueno les comento lo siguiente sucede que estoy haciendo un formulario y estoy utilizando para la validacion el plugin de jquery validate, lo que quiero hacer es cuando haya algun error se despliegue un tooltip sobre el campo que tiene error indicando algun mensaje ademas de agregar una imagen al lado de cada campo que indique si esta correcto o no.
la idea es que si el campo se valide el tooltip se esconda y es ahy dodne tengo mi error.
Código Javascript
:
Ver original<script type="text/javascript" >
$.validator.setDefaults({
debug: true,
errorElement: "em",
//errorContainer: $("#warning, #summary"),
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
success: function(label) {
hideValidTooltip()
label.text("ok!").addClass("success");
},
rules: {
firstname: {
required: true,
minlength: 2,
maxlength: 4
},
rut: {
required: true,
minlength: 8,
maxlength: 10,
validateRUT:true
}
},
messages: {
firstname: {
required: "Mensaje Error Requerido",
minlength: "Mensaje Error Min Lenght",
maxlength: "Mensaje Error Max Lenght"
},
rut: {
required: "Mensaje Error Requerido",
minlength: "Mensaje Error Min Lenght",
maxlength: "Mensaje Error Max Lenght",
validateRUT:"Rut Malo"
}
}
});
</script>
<script type="text/javascript">
$(function(){
$('input').tipsy({trigger: 'manual', gravity:'w'});
$('#Button1').click(function() {
$('input').each(function(index) {
if($(this).valid()== false) {
$(this).attr("title", "hola"+index );
$(this).tipsy("show");
}
});
});
$('#Button2').click(function() {
$('input').each(function(index) {
if($(this).valid()== false) {
$(this).attr("title", "hola"+index );
$(this).tipsy("hide");
}
});
});
$('#<%=this.Master.formName%>').validate({
});
});
function hideValidTooltip() {
$('input.valid').each(function(index) {
$(this).attr("title", "hola"+index );
$(this).tipsy("hide");
});
}
</script>
<table border="1" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td>
<label for="firstname">Name</label>
</td>
<td>
<input id="firstname" name="firstname" title="Ingrese su Nombre" />
</td>
<td></td>
</tr>
<tr>
<td>
<label for="rut">Name</label>
</td>
<td>
<input id="rut" name="rut" title="Ingrese su Rut" />
</td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<input class="submit" type="submit" value="Submit"/>
<input id="Button1" type="button" value="button" />
<input id="Button2" type="button" value="button" />
por ejemplo el primer input text ingreso un texto de 2 caracteres como minimo y maximo de 4.
si ingreso un valor correcto me muestra el mensaje del lado i la imagen lo mismo si esta equivocado, mi problema esta que cuando este esta erroneo el toltip se muestra pero cuando ingreso un dato corrcto este no se esconde al momento de ingresar 2 textos
Acontinuacion adjunto una imagen con los 3 paso por ejemplo, ademas seria ideal poder hacer que si el campo vuelve a pasar a estar incorrecto se vuelva a mostrar el tooltip ojala alguien pueda ayudarme
