html - JQuery - Icons instead of Messages Validations -

html - JQuery - Icons instead of Messages Validations -

i have form , lines of jquery validate. works fine, instead of displaying message, i'd show icon here. seek something, unsuccessfully. please help.

live code

html

<form method="post" id="testform"> <input name="txtin" type="text" id="txtin"><br /> <p></p> <button id="submit">submit</button> </form>

js

$('#testform').validate({ rules:{ txtin:{ required: true, rangelength:[8,16] } }, messages: { txtin:{ required: "please come in something", rangelength: "an error icon here" } } });

you can display icon using css, error label assigned class "error" - fiddle

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; }

if want display icon instead of error message, leave rangelength-value in messages blank - fiddle icon only.

update: follow question in comment how display 2nd icon, e.g. checkmark, in case of right format - tried right validation in fiddle, doesn't work there (but should work implementation). i'm not sure if there specific class set label in case of right validation , if there added label input @ all. easier give valid info if check web developer tools if there label added valid fields , if there class set label. in case there label e.g. class="valid", re-create , adjust above css label.valid:after , set checkmark icon background url. in case there label without class, can adjust label:after checkmark background, , adjust label.error:after background:url("your-error-icon.png") no-repeat !important;, in case of added label without error class checkmark-icon displayed, in case of label error class error-icon displayed using !important override css label.

jquery html