Hiding messages

In this example, you will learn how to hide the error messages.

Overriding CSS

By default, all error messages are placed inside a container that has .fv-plugins-message-container class. We can hide the error messages by adding one CSS property for this class:

.fv-plugins-message-container {
    display: none;
}

Overriding CSS

Handling the event

After executing a given validator, the Message plugin will emit the plugins.message.displayed event. This event is triggered after the error message is displayed. We can listen on this event to hide the error message:

FormValidation
    .formValidation(
        form,
        {
            fields: {
                ...
            },
            plugins: {
                ...
            },
        }
    )
    .on('plugins.message.displayed', function(e) {
        // e.messageElement presents the error message element
        // We can hide the message easily
        e.messageElement.style.display = 'none';
    });

Handling the event

Hiding messages

Overriding CSS

Handling the event

See also