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

Upgrading to v0.6.0

06 Jan 2015

← News

From v0.6.0, the plugin name is changed to FormValidation. To upgrade from v0.5.3 to v0.6.0, perform the following steps:

Required Step: Changing CSS, Javascript paths

This step is required.

v0.5.3: 
<!-- Path to Bootstrap CSS v3.0.0 or higher -->
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">

<!-- Path to BootstrapValidator CSS -->
<link rel="stylesheet" href="/vendor/bootstrapvalidator/dist/css/bootstrapValidator(.min).css">

<!-- jQuery v1.9.1 or higher -->
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>

<!-- Path to Bootstrap JS -->
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Path to BootstrapValidator JS -->
<script type="text/javascript" src="/vendor/bootstrapvalidator/dist/js/bootstrapValidator(.min).js"></script>
v0.6.0: 
<!-- Path to Bootstrap CSS v3.0.0 or higher -->
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">

<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation(.min).css">

<!-- jQuery v1.9.1 or higher -->
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>

<!-- Path to Bootstrap JS -->
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="/vendor/formvalidation/dist/js/formValidation(.min).js"></script>
<script src="/vendor/formvalidation/dist/js/framework/bootstrap(.min).js"></script>

Don't confuse bootstrap(.min).js file provided by the Bootstrap framework with bootstrap(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.

They are two different files and both of them need to be included as mentioned above.

Required Step: Changing your own validator

You can ignore this step in case you don't have any your own validators. Otherwise, change its declaration as following:

v0.5.3: 
(function($) {
    $.fn.bootstrapValidator.validators.yourValidatorName = {
        validate: function(validator, $field, options) {
            ...
        }
    };
}(window.jQuery));
v0.6.0: 
(function($) {
    FormValidation.Validator.yourValidatorName = {
        validate: function(validator, $field, options) {
            // ...
            // The validation code is the same
        }
    };
}(window.jQuery));

Optional Step: Calling plugin

After completing the steps above, you can call the plugin by both programmatic and declarative usages as before.

Using v0.5.3 options as your current one are supported in all v0.6.x releases. It means that you will have a lot of time to upgrade your code while current one still work.

Anyway, it is recommended to change the plugin calling, options which are listed as following:

Attribute

v0.5.3 v0.6.0
Using data-bv-xxx attribute Using data-fv-xxx attribute

Form settings

v0.5.3 v0.6.0
container err.container
feedbackIcons icon
group row.selector
submitButtons button.selector
Example 
$(form).bootstrapValidator({
    container: 'tooltip',
    feedbackIcons: {
        valid: '...',
        invalid: '...',
        validating: '...'
    },
    group: 'td',
    submitButtons: '#submitButton'
});
 
$(form).formValidation({
    framework: 'bootstrap',
    err: {
        container: 'tooltip'
    }
    icon: {
        valid: '...',
        invalid: '...',
        validating: '...'
    },
    row: {
        selector: 'td'
    },
    button: {
        selector: '#submitButton'
    }
});

Field settings

v0.5.3 v0.6.0
container err
feedbackIcons icon
group row
Example 
$(form).bootstrapValidator({
    fields: {
        fieldName: {
            container: 'tooltip',
            feedbackIcons: false,
            group: '.col-sm-3',
            validators: {
                ...
            }
        }
    }
});
 
$(form).formValidation({
    framework: 'bootstrap',
    fields: {
        fieldName: {
            err: 'tooltip',
            icon: false,
            row: '.col-sm-3',
            validators: {
                ...
            }
        }
    }
});

Events

There are two changes about the event names:

  • The namespace .bv is changed to .fv
  • The namespace error. is changed to err. to avoid window.onerror being invoked by jQuery
v0.5.3 v0.6.0
Form events
init.form.bv init.form.fv
error.form.bv err.form.fv
success.form.bv success.form.fv
added.field.bv added.field.fv
removed.field.bv removed.field.fv
Field events
init.field.bv init.field.fv
error.field.bv err.field.fv
success.field.bv success.field.fv
status.field.bv status.field.fv
Validator events
error.validator.bv err.validator.fv
success.validator.bv success.validator.fv

The last thing, the hexColor validator, deprecated in v0.5.3, is replaced with color validator.

← PREVIOUS NEXT →