Hiding success class and icon for optional field
FormValidation will not execute validators (except the notEmpty validator) when a field is empty. But the library still adds some CSS classes and icon to the field element and its container to let user know that the field is valid.
For example, if your form uses the Bootstrap plugin, the plugin will add
.has-danger class to the container element. It also adds
.is-invalid class to the field element.
If you want to remove the success class and feedback icon when a field is empty, then follow the next sections.
Hiding the success class
We can listen on the core.element.validated event as following:
Hiding the valid icon
It's possible to get the icon element for a particular field element. First, we need to retrieve the Icon plugin instance via the getPlugin() method, and then get the icon for given element:
core.element.validated's event handler, we can hide the icon element when the field is valid and empty. Don't forget to show it when the field isn't valid or field isn't empty:
Here is a demonstration for the steps above. The Middle name and Secondary email address fields are optional.