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

Examples

A collection of useful examples you can play with

Most asked questions

Basic

Advanced

Integrating with server side

These examples shows how to integrate FormValidation with the server side:

Compatibility

In order to make FormValidation work together with other plugin, you should follow two rules below:

  1. Don't exclude the field if the plugin changes the field visibility

    Some plugins hide your field and create new elements to change how the field looks like. By default, the hidden, invisible fields will not be validated. Therefore, you need to set excluded: ':disabled'. See the excluded option for more information.

    Example: Bootstrap Button

  2. Revalidate the field if the plugin changes its value dynamically:

    Most plugins trigger an event after changing the field value. By using this kind of event handler, you need to ask FormValidation to revalidate the field.

$(field)
    .nameOfPlugin(pluginOptions)
    .on(pluginChangedEvent, function() {
        $(form)
            .data('formValidation')         // Get the validator instance
            .revalidateField(field);        // Revalidate it

        // It is equivalent to use
        $(form).formValidation('revalidateField', field);
    });

Look at the revalidateField() method for more details.

Example: Chosen

These examples show how you can use FormValidation with other Javascript plugins.

Wizard

Using FormValidation, you can validate the wizard-like interfaces such as tabs, collapsible panels, accordions.

When using these kind of components, the form fields are split into multiple regions which there is only active, visible one at any time. By default, the invisible fields belonging to inactive regions will be ignored by FormValidation, we need to set excluded: ':disabled'.

For more information, see the excluded option.

In order to validate particular region, we can use validateContainer(container) method. Then use isValidContainer(container) method to determine the container is valid or not.

Below is the list of examples showing how to use FormValidation with popular wizard plugins:

Supporting other frameworks and form builders

FormValidation supports popular frameworks which are Bootstrap, Foundation, Pure, Semantic UI and UIKit.

It's designed to work with other framework including your own one. This section introduces some examples demonstrating the ways to work with other frameworks and form builders.

Frameworks
Form builders
← Add-ons Developing →