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

Adding warning validation state

Problem

The form has an input field which is validated remotely using the remote validator to check if it is available or not. Having duplicate values is allowed. In this instance, it's still possible to submit the form. I just want to warn the user by adding the warning class (has-warning) provided by Bootstrap to the form group.

Solution

Assume that the field name is userName and we use the remote validator to check its existence against the database.

In the case it is already taken in the database, we response an JSON encoded string of following object

{
    valid: true,
    message: 'The user name is already taken'
    available: false
}

The message property is used to shown in the form.

The available property is a custom property indicating the value is not available. We can reuse it later. Of course, you can change its name to other one to suit with your requirement.

Next, trigger the success.validator.fv and err.validator.fv events to add (remove) has-warning to (from) the form group.

$(form)
    .formValidation({
        fields: {
            userName: {
                validators: {
                    remote: {
                        url: '/path/to/back-end/'
                    }
                }
            }
        }
    })
    // This event will be triggered when the field passes given validator
    .on('success.validator.fv', function(e, data) {
        // data.field     --> The field name
        // data.element   --> The field element
        // data.result    --> The result returned by the validator
        // data.validator --> The validator name

        if (data.field === 'userName'
            && data.validator === 'remote'
            && (data.result.available === false || data.result.available === 'false'))
        {
            // The userName field passes the remote validator
            data.element                    // Get the field element
                .closest('.form-group')     // Get the field parent

                // Add has-warning class
                .removeClass('has-success')
                .addClass('has-warning')

                // Show message
                .find('small[data-fv-validator="remote"][data-fv-for="userName"]')
                    .show();
        }
    })
    // This event will be triggered when the field doesn't pass given validator
    .on('err.validator.fv', function(e, data) {
        // We need to remove has-warning class
        // when the field doesn't pass any validator
        if (data.field === 'userName') {
            data.element
                .closest('.form-group')
                .removeClass('has-warning');
        }
    });

For testing purpose, the back-end always responses that the user name is not available no matter what you type in the field

<form id="registerForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="userName" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#registerForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userName: {
                    validators: {
                        notEmpty: {
                            message: 'The user name is required'
                        },
                        remote: {
                            url: '/ejemplos/adding-warning-validation-state/test.json'
                        }
                    }
                }
            }
        })
        // This event will be triggered when the field passes given validator
        .on('success.validator.fv', function(e, data) {
            // data.field     --> The field name
            // data.element   --> The field element
            // data.result    --> The result returned by the validator
            // data.validator --> The validator name

            if (data.field === 'userName'
                && data.validator === 'remote'
                && (data.result.available === false || data.result.available === 'false'))
            {
                // The userName field passes the remote validator
                data.element                    // Get the field element
                    .closest('.form-group')     // Get the field parent

                    // Add has-warning class
                    .removeClass('has-success')
                    .addClass('has-warning')

                    // Show message
                    .find('small[data-fv-validator="remote"][data-fv-for="userName"]')
                        .show();
            }
        })
        // This event will be triggered when the field doesn't pass given validator
        .on('err.validator.fv', function(e, data) {
            // We need to remove has-warning class
            // when the field doesn't pass any validator
            if (data.field === 'userName') {
                data.element
                    .closest('.form-group')
                    .removeClass('has-warning');
            }
        });
});
</script>