Hiding success class

Based on the field status, the field and its container are marked as success or error element.

For Bootstrap form, 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 think that it's better to indicate error status only due to the similarity of these status colors, you can remove .has-success class from the container.

It can be done by triggering the core.element.validated event as below:

FormValidation
    .formValidation(
        form,
        {
            fields: {
                ...
            },
            plugins: {
                ...
            },
        }
    )
    .on('core.element.validated', function(e) {
        // e.element presents the field element
        // e.valid indicates the field is valid or not
        if (e.valid) {
            // Remove has-success from the container
            const groupEle = FormValidation.utils.closest(e.element, '.form-group');
            if (groupEle) {
                FormValidation.utils.classSet(groupEle, {
                    'has-success': false,
                });
            }

            // Remove is-valid from the element
            FormValidation.utils.classSet(e.element, {
                'is-valid': false,
            });
        }
    });

Hiding success class

See also