FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Hiding messages

Examples

In order to archive this, there are two things you need to know:

  • The err.field.fv event is triggered when the field is invalid
  • The element containing field messages can be retrieved via $field.data('fv.messages')
<style type="text/css">
/* Adjust feedback icon position */
#reportForm .has-feedback .form-control-feedback {
    right: -30px;
}
</style>

<form id="reportForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Bug title</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="title" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-6">
            <textarea class="form-control" name="description" rows="8"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Operating system</label>
        <div class="col-xs-9">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="os" value="window" /> Window
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="os" value="centos" /> Centos
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="os" value="fedora" /> Fedora
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="os" value="ubuntu" /> Ubuntu
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="os" value="macos" /> Mac OS X
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Browser(s)</label>
        <div class="col-xs-9">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="checkbox" name="browser[]" value="ie" /> IE
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="browser[]" value="chrome" /> Chrome
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="browser[]" value="firefox"> Firefox
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="browser[]" value="safari" /> Safari
                </label>
                <label class="btn btn-default">
                    <input type="checkbox" name="browser[]" value="opera"> Opera
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Priority</label>
        <div class="col-xs-4">
            <select class="form-control" name="priority">
                <option value="">Choose the priority</option>
                <option value="low">Low</option>
                <option value="medium">Medium</option>
                <option value="high">High</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Report issue</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#reportForm')
        .formValidation({
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                title: {
                    validators: {
                        notEmpty: {
                            message: 'The title is required'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: 'The abstract is required'
                        }
                    }
                },
                os: {
                    validators: {
                        notEmpty: {
                            message: 'The operating system is required'
                        }
                    }
                },
                'browser[]': {
                    validators: {
                        notEmpty: {
                            message: 'Choose at least one browser'
                        }
                    }
                },
                priority: {
                    validators: {
                        notEmpty: {
                            message: 'The priority is required'
                        }
                    }
                }
            }
        })
        .on('err.field.fv', function(e, data) {
            // $(e.target)  --> The field element
            // data.fv      --> The FormValidation instance
            // data.field   --> The field name
            // data.element --> The field element

            // Hide the messages
            data.element
                .data('fv.messages')
                .find('.help-block[data-fv-for="' + data.field + '"]').hide();
        });
});
</script>