JQuery - Mostrando ícones errados e corretos para validação
Eu tenho um formulário e validação JQuery. Tudo funciona bem. Em vez de mostrar mensagens, quero mostrar ícones.
O ícone errado está funcionando, mas tenho algum problema com o ícone certo. Quando a entrada está no formato correto, vejoclass="valid"
na sintaxe<input class="valid"...>
. Eu tento exibir um ícone certo depois<input..>
usandoclass="valid"
. O ícone direito é exibido no campo de texto e o campo de texto desaparece.CÓDIGO AO VIVO
Por favor ajude.
HTML
<form method="POST" id="TestForm">
<input name="txtIn" type="text" id="txtIn">
<p></p>
<button id="submit">Submit</button>
</form>
CSS
label.error:after {
content:"";
display: inline-block;
margin-left:10px;
background: url("http://dummyimage.com/15x15/de1417/de1417.png") no-repeat;
width: 15px;
height: 15px;
}
.valid{
margin-left:10px;
background: green;
width: 15px;
height: 15px;
}
JS
$('#TestForm').validate({
rules: {
txtIn: {
required: true,
rangelength: [8, 16]
}
},
messages: {
txtIn: {
required: "Please enter something",
rangelength: "Icon"
}
}
});
$('.valid').after('<div class="valid"></div>');