Tengo un formulario y validación JQuery. Todo funciona bien En lugar de mostrar mensajes, quiero mostrar iconos.

El icono incorrecto funciona, pero tengo algún problema con el icono correcto. Cuando la entrada es un formato correcto, veoclass="valid" en la sintaxis<input class="valid"...>. Intento mostrar un icono derecho después de<input..> mediante el usoclass="valid". El icono de la derecha se muestra directamente en el campo de texto y el campo de texto desaparece.CODIGO EN VIVO

Por favor ayuda.

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>');