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

Ignoring validation

Consider the following example. It asks you about the Javascript framework you like most. You can choose one from the list of popular Javascript frameworks such as Angular, Ember, Backbone, React, Knockout.

If your favorite framework is not in the list, you must fill its name in a text box. You can use the callback validator to validate this input:

$('#surveyForm').formValidation({
    fields: {
        ...
        otherFramework: {
            validators: {
                callback: {
                    message: 'Please specific the framework',
                    callback: function(value, validator, $field) {
                        var framework = $('#surveyForm').find('[name="framework"]:checked').val();

                        return (framework !== 'other')
                                // The field is valid if user picks a given framework from the list
                                ? true
                                // Otherwise, the field value is required
                                : (value !== '');
                    }
                }
            }
        }
    }
});

The logic inside the callback function is quite simple and easy to understand. The problem comes when you submit the form, the otherFramework field is marked as valid with a valid icon even if you choose a framework from the list. In that case, the otherFramework field should be completely ignored.

<form id="surveyForm" method="post">
    <div class="form-group">
        <label class="control-label">Which Javascript framework you like most?</label>
        <div class="radio">
            <label><input type="radio" name="framework" value="angular" /> Angular</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="ember" /> Ember</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="backbone" /> Backbone</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="react" /> React</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="Knockout" /> Knockout</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="other" /> Other</label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">Please specify the framework:</label>
        <input type="text" class="form-control" name="otherFramework" />
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#surveyForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                framework: {
                    validators: {
                        notEmpty: {
                            message: 'Please select a framework'
                        }
                    }
                },
                otherFramework: {
                    validators: {
                        callback: {
                            message: 'Please specific the framework',
                            callback: function(value, validator, $field) {
                                var framework = $('#surveyForm').find('[name="framework"]:checked').val();
                                return (framework !== 'other') ? true : (value !== '');
                            }
                        }
                    }
                }
            }
        })
        .on('change', '[name="framework"]', function(e) {
            $('#surveyForm').formValidation('revalidateField', 'otherFramework');
        });
});
</script>

In order to fix that, the callback method just simply returns null instead of true:

$('#surveyForm').formValidation({
    fields: {
        ...
        otherFramework: {
            validators: {
                callback: {
                    callback: function(value, validator, $field) {
                        var framework = $('#surveyForm').find('[name="framework"]:checked').val();

                        return (framework !== 'other')
                                // The field is IGNORED if user picks a given framework from the list
                                // The callback method returns NULL
                                ? null
                                // Otherwise, the field value is required
                                : (value !== '');
                    }
                }
            }
        }
    }
});

<form id="surveyForm" method="post">
    <div class="form-group">
        <label class="control-label">Which Javascript framework you like most?</label>
        <div class="radio">
            <label><input type="radio" name="framework" value="angular" /> Angular</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="ember" /> Ember</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="backbone" /> Backbone</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="react" /> React</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="Knockout" /> Knockout</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="framework" value="other" /> Other</label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">Please specify the framework:</label>
        <input type="text" class="form-control" name="otherFramework" />
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#surveyForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                framework: {
                    validators: {
                        notEmpty: {
                            message: 'Please select a framework'
                        }
                    }
                },
                otherFramework: {
                    validators: {
                        callback: {
                            message: 'Please specific the framework',
                            callback: function(value, validator, $field) {
                                var framework = $('#surveyForm').find('[name="framework"]:checked').val();
                                return (framework !== 'other') ? null : (value !== '');
                            }
                        }
                    }
                }
            }
        })
        .on('change', '[name="framework"]', function(e) {
            $('#surveyForm').formValidation('revalidateField', 'otherFramework');
        });
});
</script>

By returning null, the field validator is completed ignored. You don't need to trigger event to handle that as seen in the Conditional validation example.

When the field validation is ignored, its container will not have the success class, and the associated icon isn't shown.

This feature is only available from v0.6.2

You can apply the same principle when using the validators from following list:

Validator	Example
callback validator	`callback: { callback: function(value, validator, $field) { return null; // If you want to attach more data to reuse later return { valid: null, key: value, otherKey: value }; } }`
promise validator	`promise: { promise: function(value, validator, $field) { var dfd = new $.Deferred(); // ... Do your logic checking // Resolve when particular task is done dfd.resolve({ valid: null }); return dfd.promise(); } }`
remote validator	The backend returns a JSON string that consists of `valid` key: `{ valid: null }`
Your own validator	`(function($) { FormValidation.Validator.yourValidatorName = { validate: function(validator, $field, options) { // ... Do your logic checking return null; // If you want to attach more data to reuse later return { valid: null, key: value, otherKey: value }; } }; }(window.jQuery));`

Ignoring validation

Related ejemplos