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-success or .has-danger class to the container element. It also adds .is-valid or .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:

Inside the 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.

More examples