This site contains the document for old version. Please upgrade to the latest version v1.0.0

Enabling validators

← Examples

This example demonstrates how to enable/disable validators on the fly.

You might need two things:

  • The enabled option: This option is used to enable/disable the field validators initially.
  • The enableFieldValidators() method: This method enables/disables the field validators.

In the following form, the new password is not required. Its validators are disabled. When user set the password, the validators will be enabled.

<form id="enableForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name (*)</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="full_name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">New password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Confirm password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="confirm_password" />
        </div>
    </div>

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

<script>
$(document).ready(function() {
    $('#enableForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                full_name: {
                    validators: {
                        notEmpty: {
                            message: 'The full name is required and cannot be empty'
                        }
                    }
                },
                password: {
                    enabled: false,
                    validators: {
                        notEmpty: {
                            message: 'The password is required and cannot be empty'
                        }
                    }
                },
                confirm_password: {
                    enabled: false,
                    validators: {
                        notEmpty: {
                            message: 'The confirm password is required and cannot be empty'
                        },
                        identical: {
                            field: 'password',
                            message: 'The password and its confirm must be the same'
                        }
                    }
                }
            }
        })
        // Enable the password/confirm password validators if the password is not empty
        .on('keyup', '[name="password"]', function() {
            var isEmpty = $(this).val() == '';
            $('#enableForm')
                    .formValidation('enableFieldValidators', 'password', !isEmpty)
                    .formValidation('enableFieldValidators', 'confirm_password', !isEmpty);

            // Revalidate the field when user start typing in the password field
            if ($(this).val().length == 1) {
                $('#enableForm').formValidation('validateField', 'password')
                                .formValidation('validateField', 'confirm_password');
            }
        });
});
</script>

Related examples