score:0

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.


Related Query

More Query from same tag