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
- JQuery validator how to remove error messages and add border coloring instead
- Show error messages in div container for validations using Jquery
- Displaying messages to user from ASP.NET using jQuery
- jQuery validation plug-in is failing element validations even when elements are disabled
- How to disable or hide carousel next/prev icons using jquery
- Dynamically created checkbox click event selecting the whole row instead of only the check box in a jquery datatable. Why is that?
- jQuery UI modal dialog: button icons do not appear
- why isn't my element:contains(variable) work when using variable instead of string? jquery
- jQuery UI autocomplete highlight full word instead of matched substring
- Using jQuery Validation plugin for a div instead of form?
- google maps v3 markerwithlabel jquery rotate icons
- JQuery mobile use 36x36 icons
- jquery ajax request using OPTIONS instead of GET/POST - only on iPad?
- ASP MVC JsonResult renders as page instead of being captured by calling jQuery function
- How to get jQuery Validate to fire the "success" method "onchange" instead of "onblur" for select menus?
- Google Material Icons showing text instead of icon
- JQuery UI, Replace and Push Down the Item Instead of Sort
- Using a jquery slider for text instead of images?
- jQuery Ajax sometimes Performs GET Instead of POST
- jQuery Masonry rendering "row blocks" instead of fitting elements
- Using jQuery instead of cURL for REST API calls in PHP
- Condensing jQuery instead of writing code for each popup
- jQuery Validator, reset password fields and messages
- How to enable sorting on a particular column instead disable particular column in jQuery Datatables
- jQuery Validate Plugin groups: Error message shows for last invalid field instead of first invalid field in the group
- Using jQuery instead of AJAX to simulate UpdatePanel functionality
- Check all validations with jquery before posting in asp.net mvc 5
- Developing a jQuery plugin that returns a given object, instead of jQuery object itself!
- JQuery Ajax call gets resolved to the current Controller Folder, Instead of root Folder
- JQuery slideUp horizontal menu instead of slideDown
- JQuery validation - show field name in error messages
- Issues With Jquery Form Validations
- Why is this jQuery reference '$("<div />")' instead of '$("<div></div>")'?
- Disabling error messages when using the JQuery validator extension
- JQuery Flot : How to add data to the existing point graph instead of redrawing
- Jquery Tokeninput how to get name instead of the id
- Can JQUERY UI date picker show day name instead of a date?
- IE jQuery returns auto instead of the element width
- jQuery in Chrome returns "block" instead of "inline"
- jQuery add CSS instead of replace? or set multiple?
- How do I make jQuery modify only one div, instead of all divs of the same class?
- Why is jQuery html() method adding content to a paragraph instead of replacing it?
- Jquery DataTable : Replacing the buttons with icons at the same location
- Call CSS Class instead of inserting Attribute using JQuery (.css())
- jQuery warning: event.returnValue is deprecated. Please use the standard event.preventDefault() instead
- Forced to use jQuery instead of $
- jQuery Tab switcher on Hover event instead of Click
- Jquery Validation Plugin messages can be written with the html tags itself
- jQuery - $this instead of $(this)?
- How to implement jquery live() instead of each()
More Query from same tag
- Getting Cross-site XML response with jquery
- How to detect if an html element is in browser window?
- Working with Markdown properly and securely
- Jquery Index reporting wrong index
- Can't in display the pop up window on button click
- JSF RichFaces locale dropdown list with flag icons
- JQuery event-listener for .show('drop', 500) == finished
- Mustache JS and merging templates
- Ellipsis with children div
- Bxslider set middle slide as active slide
- load blue-imp jquery fileupload with RequireJS
- How to trigger click for fancybox html pop in magento
- Create multiple select form with javascript
- How to style top-level elements of a nested list
- How to separate data and register it in a database
- keep sticky div with same width when you scroll
- Jquery Shortening code
- Extract cell index of clicked HTML table using jQuery
- Routes and window.location - Laravel
- jQuery Animation + background image swap
- JQuery appending to elements - better techniques?
- How to use jQuery Ajax to pass multiple form values to php?
- calling a VB.net function from javascript
- Pinging the server periodically with jQuery and Rails without a form, updating a table
- How can I get the ID of current page or post in WordPress?
- jquery-ui menu keep sub menu open
- How to stop address from populating autocomplete with google places
- JavaScript Clone an inner HTML and then create new div based on that cloned text
- How do I use JQuery to select an item that is currently being hovered over?
- AJAX issues, no response or "access is denied"