JQuery - Icons instead of Messages Validations

Question

I have a form and some lines of JQuery to validate. It works all fine, but instead of displaying a message, I'd like to show an icon here. I try something, but 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 enter something",
            rangelength: "An error icon is here"
        }
    }
});

matthias_h · Answer 1 · 2014-10-11T23:30:24.707

You can simply display an icon using CSS, as for an error the label is assigned a 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 you only want to display an icon instead of an error message, just leave the rangelength-value in messages blank - Fiddle with icon only.

Update: For the follow up question in the comment how to display a 2nd icon, e.g. a checkmark, in case of right format - I just tried to get a correct validation in the Fiddle, but it doesn't work there (but it should work for your implementation). So I'm not sure if there is any specific class set to the label in case of correct validation and if there is added a label to the input at all. It would be easier to give any valid information if you would check with web developer tools if there is any label added for valid fields and if there is any class set for this label. In case there is a label with e.g. class="valid", you could just copy and adjust above css for label.valid:after and set the checkmark icon as background url. In case there is a label without a class, you can adjust label:after with the checkmark as background, and adjust label.error:after with background:url("your-error-icon.png") no-repeat !important;, so in case of an added label without the error class the checkmark-icon will be displayed, in case of a label with the error class the error-icon will be displayed by using !important to override the css for label.

@ Matthias, Wow, it works great. Thank you so much! That gets me another concern, how to show another icon (such as a check mark) if input is a right format. — abcid d, Oct 11 '14 at 23:10
@abcidd Glad it's working for you, though it might be a kind of workaround. I didn't find anything in the validate documentation about an option to display icons instead of messages, so just this answer as suggestion. For the checkmark-question I've just updated my answer. — matthias_h, Oct 11 '14 at 23:33
@ Matthias, Thank you very much! I think if we have `label.error:after`, we don't need to have `errorPlacement: function(error, element){....` Without this syntax, the error icon still shows! and thank you very much for your suggestion ` class="valid"`. This is a great approach. I am working on it, but somehow I didn't get it right, yet. Please take a look at my new question [here http://stackoverflow.com/questions/26325789/jquery-showing-wrong-and-right-icons-for-validation] — abcid d, Oct 12 '14 at 14:00

JQuery - Icons instead of Messages Validations

1 Answers1