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

Switching validators on the same field

In general, a field might have different validators. Based on various conditions, some of them can be turned on, and the remaining are turned off.

For instance, the following form asks user to fill in a number which must be a valid Brazilian ID (known as CPF) or VAT (known as CNPJ) number. CPF and CNPJ numbers have 11 and 14 characters respectively. Based on the length of input, we can guess which type of number user is trying to put in.

From that, we can turn on (off) the associated validator by using the enableFieldValidators() method.

In details, the example uses various options to archive the requirements:

Firstly, use the enabled option to enable (disable) validators initially

$('#profileForm').formValidation({
    fields: {
        yourId: {
            validators: {
                id: {
                    // The id validator is enabled by default
                    enabled: true,
                    country: 'BR'
                },
                vat: {
                    // The vat validator is disabled initially
                    enabled: false,
                    country: 'BR'
                }
            }
        }
    }
});

Lastly, turn on (off) the validators based on the length of field:

// If the field has 14 characters
$('#profileForm')
    // Disable the id validator
    .formValidation('enableFieldValidators', 'yourId', false, 'id')

    // Enable the vat one
    .formValidation('enableFieldValidators', 'yourId', true, 'vat');

Below is the working example that you can play with:

<form id="profileForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-5 control-label">Brazilian ID or VAT number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="yourId" />
        </div>
    </div>

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

<script>
$(document).ready(function() {
    $('#profileForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                yourId: {
                    validators: {
                        notEmpty: {
                            message: 'The ID is required and cannot be empty'
                        },
                        id: {
                            // The id validator is enabled by default
                            enabled: true,
                            country: 'BR',
                            message: 'Please enter a valid Brazilian ID number'
                        },
                        vat: {
                            // The vat validator is disabled initially
                            enabled: false,
                            country: 'BR',
                            message: 'Please enter a valid Brazilian VAT number'
                        }
                    }
                }
            }
        })
        .on('input keyup', '[name="yourId"]', function() {
            switch ($(this).val().length) {
                // User is trying to put a VAT number
                case 14:
                    $('#profileForm')
                        // Disable the id validator
                        .formValidation('enableFieldValidators', 'yourId', false, 'id')
                        // Enable the vat one
                        .formValidation('enableFieldValidators', 'yourId', true, 'vat')
                        // Revalidate field
                        .formValidation('revalidateField', 'yourId');
                    break;

                // User is trying to put an ID number
                case 11:
                default:
                    $('#profileForm')
                        .formValidation('enableFieldValidators', 'yourId', true, 'id')
                        .formValidation('enableFieldValidators', 'yourId', false, 'vat')
                        .formValidation('revalidateField', 'yourId');
                    break;
            }
        });
});
</script>

Switching validators on the same field

Related ejemplos