Updates

New features

• Add new methods to enable and disable a given plugin:

const fv = FormValidation.formValidation(form, {
    fields: {...},
    plugins: {
        trigger: new FormValidation.plugins.Trigger(),
    },
});

// Enable the Trigger plugin
fv.enablePlugin('trigger');

// Check if a given plugin is enabled or not
fv.isPluginEnabled('trigger');  // `true`

// Disable the Trigger plugin
fv.disablePlugin('trigger');

• New Turnstile plugin that integrates with the Cloudflare's Turnstile captcha

FormValidation.formValidation(form, {
    fields: {...},
    plugins: {
        turnstile: new FormValidation.plugins.Turnstile({
            ...
        }),
    },
});

Bug fix

• Fix an issue that happens when a field name contains double quotes

New feature

• The SubmitButton plugin adds a new liveMode option. All validations are disabled until users submit the form if it is set to false:

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            submitButton: new FormValidation.plugins.SubmitButton({
                liveMode: false,
            }),
            ...
        },
    }
);

Improvement

• The hiddenPhoneInput option of the InternationalTelephoneInput plugin supports multiple fields:

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
                field: 'phone1,phone2',
                hiddenPhoneInput: 'fullPhoneNumber1,fullPhoneNumber2',
            }),
            ...
        },
    }
);

New feature

• The InternationalTelephoneInput plugin provides a new hiddenPhoneInput option that serves the same functionality as the hiddenInput option provided by intl-tel-input.

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
                ...
                hiddenPhoneInput: 'fullPhoneNumber',
            }),
            ...
        },
    }
);

Bug fixes

• The remote validator builds an incorrect URL when using the GET method
• Setting the enabled attribute to false doesn't work with the Declarative plugin:

<input type="text" name="username" data-fv-not-empty="true" data-fv-not-empty___message="The username is required" data-fv-not-empty___enabled="false" />

New features

• The @form-validation/core package provides a new helper to remove undefined properties from a given object:

import { utils } from '@form-validation/core';
const { removeUndefined } = utils;

• Add new esm format that can be used with the <script type=module> tag:

<script type="module">
    import { formValidation, plugins } from '/path/to/@form-validation/esm/bundle/popular.min.js';
    import { Bootstrap5 } from '/path/to/@form-validation/esm/plugin-bootstrap5/index.min.js';

    // Core plugins are already included in `bundle`
    const { Icon, SubmitButton, Trigger } = plugins;

    document.addEventListener('DOMContentLoaded', function (e) {
        formValidation(
            ...,
            {
                fields: {
                    ...
                },
                plugins: {
                    trigger: new Trigger(),
                    bootstrap5: new Bootstrap5(),
                    submitButton: new SubmitButton(),
                    icon: new Icon({
                        valid: 'fa fa-check',
                        invalid: 'fa fa-times',
                        validating: 'fa fa-refresh',
                    }),
                },
            }
        );
    });
</script>

Bug fixes

• The following validators don't work properly if the message property isn't defined
  • between
  • date
  • emailAddress
  • greaterThan
  • iban
  • id
  • integer
  • ip
  • lessThan
  • numeric
  • phone
  • remote
  • stringCase
  • stringLength
  • uri
  • uuid
  • vat
  • zipCode
• The date validator doesn't work properly when min or max option contains the AM/PM format
• The date validator doesn't return the correct date in the meta property when using the AM/PM format
• The @form-validation/plugin-j package doesn't register popular validators
• The Recaptcha plugin doesn't clear the loaded callback after uninstalling
• The StartEndDate plugin doesn't work properly if the format option contains the AM/PM format
• type and extension options of the file validator are required

New features

• The entire library is available as npm packages.

• The file validator provides a new validateFileName function to check if file name(s) without extension is valid

file: {
    validateFileName: function(fileName) {
        // `fileName` is the file name without the extension
        // returns true or false
    },
},

• The emailAddress validator provides a new requireGlobalDomain option to require a global domain. The option is false by default. For example, a@b will be an invalid email address if you set requireGlobalDomain to true.

Bug fixes

• The extension and file options of the file validator can contain spaces
• Remove is-valid and is-invalid CSS classes from input when it is being validated
• The destroy() function throws an exception when using the Bootstrap5 plugin
• The remote validator sends a request to an incorrect URL if the url has a query string
• The Recaptcha3 and Recaptcha3Token plugins don't clear loaded callback after uninstalling
• The German VAT numbers don't start with 0
• The Luxembourgian VAT number validator doesn't work with some numbers

Breaking changes

• Before v2.0.0, users confuse the scripts provided by FormValidation and the associated library. For example, the Bootstrap.min.js file is the plugin provided by FormValidation. It is NOT the same as the Bootstrap(.min).js file provided by the Bootstrap framework.
• The umd and es6 packages have different folder structures.

• Uikit plugin is renamed to UiKit

Upgrade to v2.0.0

<!-- Before v2.0.0 -->
<script src="/dist/js/FormValidation.min.js"></script>

<!-- From v2.0.0 -->
<script src="/@form-validation/umd/bundle/popular.min.js"></script>

// Before v2.0.0
FormValidation.plugins.Uikit();

// v2.0.0
FormValidation.plugins.UiKit();

New feature

• Add new core.validator.enabled and core.validator.disabled events that are triggered after a validator is enabled or disabled

FormValidation.formValidation(formElement, {
    fields: {
        // ...
    },
    plugins: {
        // ...
    },
})
    .on('core.validator.enabled', (e) => {
        // Triggered after a validator is enabled
    })
    .on('core.validator.disabled', (e) => {
        // Triggered after a validator is disabled
    });

Improvements

• Prevent the form from adding an empty div at the end. It might cause an issue if the form children have the flex-grow style
• The enableValidator and disableValidator methods don't throw exception if the fied doesn't exist or has any validator
• The previous and next buttons in the Wizard plugin can be placed outside of the form by using the id selectors:

<form>...</form>

<button id="prevButton">...</button>
<button id="nextButton">...</button>

const fv = FormValidation.formValidation(form, {
    plugins: {
        wizard: new FormValidation.plugins.Wizard({
            prevButton: document.getElementById('prevButton'),
            nextButton: document.getElementById('nextButton'),
        }),
    },
});

• The Wizard plugin exposes the goToStep() method
• The InternationalTelephoneInput plugin provides new API to get the instance of intl-tel-input:

const fv = FormValidation.formValidation(form, {
    fields: {
        phone: {
            validators: {
                notEmpty: {
                    message: 'The phone number is required',
                },
            },
        },
    },
    plugins: {
        internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
            field: 'phone',
            ...
        }),
    },
});

// Get the InternationalTelephoneInput plugin instance
const internationalTelephoneInputPlugin = fv.getPlugin('internationalTelephoneInput');

// Get the `intl-tel-input` instance
const intlTelInstance = internationalTelephoneInputPlugin.getIntTelInstance('phone');

// Get the phone number including the country code
// See https://github.com/jackocnr/intl-tel-input#public-methods
const phoneNumber = intlTelInstance.getNumber();

Bug fixes

• Can't re-register the Framework plugin
• In some very fast systems, the FormValidation.utils.fetch function doesn't generate a unique callback for cross domain request. It can leads to the issue where there are multiple remove validators are used, for example.
• The Bulma plugin doesn't add the error styles to select elements
• The icons provided by the MandatoryIcon plugin disappear when switching between steps in a wizard
• The Trigger plugin throws an exception when there is a field whose name is a property of String.prototype such as link
• The updateFieldStatus(field, 'Invalid', validator) method with the validator parameter defined doesn't mark the field as invalid. Hence, the core.field.invalid event isn't triggered for that field.

New features

• Add new init option that allows to perform initialization tasks before adding fields.

FormValidation.formValidation(document.getElementById('demoForm'), {
    fields: {
        // ...
    },
    plugins: {
        // ...
    },
    init: (instance) => {
        instance.on('plugins.message.placed', function (e) {
            // Adjust the message placement before adding fields
        });
    },
});

• Add form validation instance to form events

FormValidation.formValidation()
    .on('core.form.notvalidated', function (e) {
        console.log(e.formValidation);
    })
    .on('core.form.validating', function (e) {
        console.log(e.formValidation);
    })
    .on('core.form.valid', function (e) {
        console.log(e.formValidation);
    })
    .on('core.form.invalid', function (e) {
        console.log(e.formValidation);
    });

• The Wizard plugin provides the ability of skipping a step:

Wizard({
    isStepSkipped: function (skipStepProps) {
        // skipStepProps.currentStep:   The current step
        // skipStepProps.numSteps:      The total number of steps
        // skipStepProps.targetStep:    The target step
        // Returns `true` if you want to skip the step
    },
});

• The Wizard plugin allows to define the excluded field, so that we can animate the current step when jumping between steps.

Wizard({
    isFieldExcluded: function(field: string, element: HTMLElement, elements: HTMLElement[])
        // field:       The field name
        // element:     The field element
        // elements:    The field elements

        // Returns `true` if you want to exclude the field, so it won't be validated
    },
})

Bug fixes

• Calling the updateFieldStatus() method for a checkbox input throws an exception
• The resetForm() and resetField() methods don't remove the invalid CSS classes from checkboxes, radios except the first one
• The Bootstrap5 plugin select element has duplicate icons
• The zipCode validator throws an exception if the message option isn't defined

Improvement

• The Bootstrap5 plugin supports floating labels

Bug fixes

• The Bootstrap5 plugin loses the border radius of input groups
• The Bootstrap5 plugin shows error message at a wrong place when using with variants of add-on input

TypeScript definition

• Change ValidateFunction to ValidateFunction<ValidateOptions>

New feature

• Add new Bootstrap5 plugin that supports Bootstrap v5

Bug fixes

• The Tooltip plugin doesn't display the error message at proper position if it is long enough
• The tooltip blocks user from entering the field
• The stringLength validator doesn't increase or decrease the number of characters in the error message
• The Bulgarian VAT validator doesn't work for some VAT numbers
• The French VAT validator doesn't work for some VAT numbers
• Fix an issue found in the ES6 version of the Message plugin

New features

• Add new Recaptcha3Token plugin that sends the reCaptcha v3 token to the back-end when the form is valid
• Provide TypeScript definition files for es6 and UMD packages
• Core provides new setFieldOptions method to set the options for given field

Improvements

• Support new format of Dutch VAT number
• The notEmpty validator provides new trim option which is false by default
• The Declarative plugin parses validator options of element attributes when a field is added via the addField() method
• The SubmitButton plugin allows to define the submit buttons

<form id="demoForm">...</form>

<!-- External button -->
<button type="button" id="externalButton" />

FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: ...,
        plugins: new FormValidation.plugins.SubmitButton({
            buttons: function(form) {
                return [].slice.call(document.getElementById('externalButton'));
            },
        }),
    }
);

• The selector option is removed.

Bug fixes

• The Recaptcha plugin sends the back-end verification request twice
• The South African identification validator doesn't work with the minified version
• The cusip validator doesn't work properly anymore
• The Declarative plugin doesn't set the correct values for boolean options. For example, it transformts data-fv-between___inclusive="false" to inclusive: 'false', not inclusive: false.

Breaking change

• The selector option of the SubmitButton plugin is removed.

Upgrading to v1.7.0

• If you are using the selector of SubmitButton plugin, then you need to replace it with the buttons option.

New features

• Add new amd package that you can use with RequireJS
• The Trigger plugin adds a new filter named plugins-trigger-should-validate. We can use it to determine the field is validated automatically when the value is changed or not.

Improvements

• AutoFocus's onPrefocus option provides the access to the field name
• The Recaptcha3 plugin adds new minimum score option. The backend verification will be treated as invalid if the returned score doesn't exceed this option
• The Recaptcha3 plugin can return an error message from the backend verification
• The Wizard plugin adds new API to go to the previous or next steps. It's useful when users want to go to the next step automatically, for example, after choosing a checkbox or radio button.
• The L10n plugin supports localized error message in custom validator:

const strongPassword = function() {
    return {
        validate: function(input) {
            const value = input.value;
            if (value === '') {
                return {
                    valid: true,
                };
            }

            if (value.length < 8) {
                return {
                    valid: false,
                    message: {
                        en_US: 'The password must have at least 8 characters',
                        vi_VN: 'Mật khẩu phải có ít nhất 8 ký tự',
                    },
                };
            }

            ...
        }
    };
};

Bug fixes

• The MandatoryIcon plugin doesn't work with textarea element
• Fix an issue in normalizeResult method which can cause an exception
• The FieldStatus plugin doesn't work with ignored fields
• Fix an issue in the Tooltip plugin that causes the tooltip position isn't calculated correcly
• The SubmitButton plugin doesn't send the clicked button to server

• between validator
• greaterThan validator
• iban validator
• id validator
• lessThan validator
• phone validator
• step validator
• stringLength validator
• uuid validator
• vat validator
• zipCode validator

Breaking change

• The getStatues() method of FieldStatus plugin is renamed to getStatuses()

Upgrading to v1.6.0

• If you are using the getStatues of FieldStatus plugin, then you need to change to getStatuses.

New features

• New FieldStatus plugin tracks the field status, and allows us to perform an action when a field status is changed. In the following code snippet, we can disable or enable the Submit button based on the validity of all fields:

const demoForm = document.getElementById('demoForm');

// Submit button
const submitButton = demoForm.querySelector('[name="signup"]');

const fv = FormValidation.formValidation(demoForm, {
    fields: {
        ...
    },
    plugins: {
        fieldStatus: new FormValidation.plugins.FieldStatus({
            onStatusChanged: function(areFieldsValid) {
                // areFieldsValid is true if all fields are valid
                areFieldsValid
                    // Enable the submit button
                    // so user has a chance to submit the form again
                    ? submitButton.removeAttribute('disabled')
                    // Disable the submit button
                    : submitButton.setAttribute('disabled', 'disabled');
            }
        }),
        ...
    }
});

• New PasswordStrength plugin: Powered by the zxcvbn library, the PasswordStrength plugin can be used to check the strength of a password.
• New Recaptcha3 plugin: There are some users asking for supporting Google reCAPTCHA v3, and the answer is the new Recaptcha3 plugin.

• The id validator supports Israeli identity number

Improvements

• The ean validator now supports GTIN-14 format.
• Hide the icon if the Recaptcha plugin uses the invisible widget.

Bug fixes

• Fix ASP.Net integration issue
• Fix an issue that the click handler of submit button of ASP.Net form isn't executed. Now you can fix it easily with new aspNetButton option provided by the SubmitButton plugin:

<form id="demoForm" runat="server">
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_OnClick" />
</form>

<script>
    document.addEventListener('DOMContentLoaded', function(e) {
        const demoForm = document.getElementById('demoForm');

        const fv = FormValidation.formValidation(demoForm, {
            fields: {
                ...
            },
            plugins: {
                submitButton: new FormValidation.plugins.SubmitButton({
                    aspNetButton: true,
                }),
            }
        });
    });
</script>

• Fix an issue that the AutoFocus plugin doesn't work.
• Fix a bug that emailAddress validator doesn't support multiple email addresses on IE 11.
• Fix a bug that the Wizard plugin doesn't work on IE 11.
• Fix the duplicated icons when using the Icon plugin with Bootstrap 4.3.
• Thanks Michal Heban for fixing the Czech translation for the stringLength validator.

Breaking changes

• It is not possible to use Status from this version, so please replace Status with the corresponding value. For example: FormValidation.Status.Validating must be replaced with string of 'Validating'.
• The AutoFocus plugin now is an external plugin

Upgrading to v1.5.0

• Replacing Status with corresponding value:

• If you are using the AutoFocus plugin, then you need to insert its script:

<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-auto-focus/index.min.js"></script>

New features

• Add verhoeff() helper method that implements the Verhoeff algorithm.
• The vat validator validator supports Argentinian VAT number.

• Argentinian identification number (DNI)
• Colombian identification number (NIT)
• French identification number (NIR)
• Hong Kong identification number (HKID)
• Indian identification number (Aadhaar)
• Korean identification number (RRN)
• Malaysian identification number (NRCI)
• Mexican identification number (CURP)
• Norwegian identification number (Fødselsnummer)
• Peruvian identification number
• Taiwanese identification number
• Uruguayan identification number
• The Declarative plugin now supports plugin declarations

<form
    id="demoForm"
    method="POST"
    data-fvp-trigger="true"
    data-fvp-trigger___class="FormValidation.plugins.Trigger"
    data-fvp-tachyons="true"
    data-fvp-tachyons___class="FormValidation.plugins.Tachyons"
    data-fvp-submit-button="true"
    data-fvp-submit-button___class="FormValidation.plugins.SubmitButton"
    data-fvp-icon="true"
    data-fvp-icon___class="FormValidation.plugins.Icon"
    data-fvp-icon___valid="fa fa-check"
    data-fvp-icon___invalid="fa fa-times"
    data-fvp-icon___validating="fa fa-refresh"
>
    ...
</form>

<script>
    document.addEventListener('DOMContentLoaded', function (e) {
        const form = document.getElementById('demoForm');
        FormValidation.formValidation(form, {
            plugins: {
                // You have to register the Declarative plugin only
                declarative: new FormValidation.plugins.Declarative(),
            },
        });
    });
</script>

<form id="demoForm">...</form>

<script>
    document.addEventListener('DOMContentLoaded', function (e) {
        const form = document.getElementById('demoForm');
        FormValidation.formValidation(form, {
            plugins: {
                declarative: new FormValidation.plugins.Declarative(),
                // Other plugins
                trigger: new FormValidation.plugins.Trigger(),
                tachyons: new FormValidation.plugins.Tachyons(),
                submitButton: new FormValidation.plugins.SubmitButton(),
                icon: new FormValidation.plugins.Icon({
                    valid: 'fa fa-check',
                    invalid: 'fa fa-times',
                    validating: 'fa fa-refresh',
                }),
            },
        });
    });
</script>

Improvements

• Separate id validators to id package to save imports when using with ES6 module.

// You might need to change the importing path
import id from '/vendors/@form-validation/cjs/validator-id';

const result = id().validate({
    value: ...,
    options: {
        country: 'BR',
        message: 'The input is not a valid Brazilian identification number',
    },
});

// You might need to change the importing path
import brId from '/vendors/@form-validation/cjs/validator-id/brId';

const result = brId().validate('An ID here');

• Separate vat validators to vat package to save imports when using with ES6 module.
• In the last version, the Recaptcha plugin doesn't hide the error message and error icon when user click the captcha checkbox.
• The error icon disappears when the captcha is expired. This version fixes that.
• Support the latest version of TurretCSS (v5.1.3).
• The vat validator supports Swiss VAT numbers that end with TVA, IVA, TPV.

Bug fixes

• Upgrade source code to be compatible with the latest Tyescript version (3.4.4).
• Fix an issue that the ismn validator passes an invalid ISMN which ends with 0.
• Fix an issue that the meid validator passes an invalid MEID which ends with 0.
• The iban validator supports the new format of Costa Rica IBAN number (22 digits currently).
• Fix an issue that icon is displayed at wrong position for Spectre form.
• Fix an issue that the Message plugin doesn't ignore field on IE11

New features

• New Excluded plugin allows you to indicate fields which won't be validated. It severs the same functionality as the excluded option in v0.8.1 and earlier versions.
• New Wizard plugin supports validating multiple steps form.
• This version provides new onPrefocus option in the AutoFocus plugin. This option is useful when you want to activate the tab containing the first invalid field.

Bug fix

• Fix an issue that the resetForm, resetField methods don't reset value for textarea element

New features

Improvements

• Stop performing remaining validators if there is a validator that the field does not pass, via the Sequence plugin
• Be able to postpone the validation for a given number of seconds from the moment user stops fill in the field via the Trigger plugin

New features

• New Sequence plugin

• New StartEndDate plugin

• Support invisible reCAPTCHA

• Improve Trigger plugin

Improvements

• The min, max options in the date validator accept a function returning a Date object or a string
• For each field, all validators are performed in a sequential order
• Remove the timeout option in the Recaptcha plugin. The captcha expiration will be handled by the plugin automatically
• Remove unused stoken option in the Recaptcha plugin
• Add new option in the Recaptcha plugin to support back-end verification
• Hide the clear field icon on Internet Explorer. So you will not see two icons when using with the Icon plugin

Bug fixes

• The library is now compatible with Internet Explorer 11. Behind the scene, we use Babel to compile the ES6 code into ES5 compatible code
• Fix an issue that the updateFieldStatus() method method ignores the validator parameter when setting the field status
• Fix an issue that the valid/invalid CSS classes aren't removed from field element when executing resetForm, resetField methods
• Fix an issue that the field element doesn't reset value when executing resetForm, resetField methods

Bug fixes

• Fix an issue that the separator option in date validator isn't determined properly
• Fix an issue that the message container isn't added success/error CSS classes when choosing any but first checkbox
• Fix an issue that the remote validator and FormValidation.utils.fetch() method don't send the correct data for POST request

New features

• Rewritten everything from scratch in Typescript and ES6.
• Being type safety with Typescript always gives safe, enjoyable feeling when maintaining a big codebase with 50 validators and 26 plugins. These numbers are increasing
• No dependency. Hooray!!!
• It doesn't depend on jQuery anymore. Anyway, if you are still a fan of jQuery and prefer to use it as a jQuery plugin, we build the J plugin for you
• Compatible with ES6 module. It means that you can use import and integrate with JavaScript frameworks such as React, Vue, Sapper, etc.
• Built on plugin based architecture. The core libary is very lighweight. Everything else is plugins
• All validators can be used independently. Inspried by functional programming paradigm, all built in validators are just functions. So you can use it in browser:

const result = FormValidation.validators.creditCard().validate({
    value: '340653705597107',
    options: {
        message: 'The credit card number is not valid',
    },
});

// result.valid === true
// result.meta.type === 'AMERICAN_EXPRESS'

// You might need to change the importing path
import creditCard from '/vendors/formvalidation/dist/js/es6/validators/creditCard';

const result = creditCard().validate({
    value: '340653705597107',
    options: {
        message: 'The credit card number is not valid',
    },
});
// result.valid === true
// result.meta.type === 'AMERICAN_EXPRESS'

• Write the validator once and reuse it everywhere. Yay!
• In addition to +400 Mocha unit tests, this version also covers hundreds of end-to-end test cases against Selenium server with Nightwatch.js framework
• Designed to work with native form without using any specific CSS frameworks

• This entire website is rewritten in Sapper. Super fast website, indeed!
• Everything is developed in JavaScript and under control.
• Have you ever heard about functional CSS? This website uses the Tachyons libary without wrting any new CSS. Yes, I don't have to create any new CSS, just combine existing Tachyons CSS classes to get the job done.
• Every pieces on this website, including the page you're reading rightnow, are components. I can reuse it in any places.

<div class="fl w-100 bl bt b--light-gray">
    <Framework name="Bootstrap 4" url="/guide/plugins/bootstrap/" isNew />
    <Framework name="Foundation" url="/guide/plugins/foundation/" />
    <Framework name="UIKit" url="/guide/plugins/ui-kit/" />
</div>
<div class="fl w-100 bl b--light-gray">
    <Framework name="Semantic UI" url="/guide/plugins/semantic/" />
    <Framework name="PureCSS" url="/guide/plugins/pure/" />
    <Framework name="Bulma" url="/guide/plugins/bulma/" isNew />
</div>
<div class="fl w-100 bl b--light-gray">
    <Framework name="Shoelace" url="/guide/plugins/shoelace/" isNew />
    <Framework name="Spectre" url="/guide/plugins/spectre/" isNew />
    <Framework name="Tachyons" url="/guide/plugins/tachyons/" isNew />
</div>

• User can easily copy sample code to clipboard via the Copy button on the top right corner
• Each sample code is a full HTML page with required CSS and JavaScript.
• The iframe demo and its page connect to each other via the postMessage() method. No accessing the DOM directly as in the previous version.

Breaking changes

Upgrading to v1.0.0

• Upload v1.0.0 files to your server
• Convert options in previous verion to associated plugin

<html>
    <head>
        <!-- Optional: To use FontAwesome icons for icon option -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

        <!-- Required: Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />

        <!-- Required: FormValidation CSS -->
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="signinForm" method="POST">
            <div class="form-group row">
                <label class="col-md-3 col-form-label">Username</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="username" />
                </div>
            </div>

            <div class="form-group row">
                <label class="col-md-3 col-form-label">Password</label>
                <div class="col-md-5">
                    <input type="password" class="form-control" name="password" />
                </div>
            </div>

            <div class="form-group row">
                <div class="col-md-9 offset-md-3">
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </div>
            </div>
        </form>

        <!-- Required: jQuery v1.9.1 or higher -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

        <!-- Required: FormValidation plugin -->
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>

        <!-- Required: The class supports validating Bootstrap form -->
        <script src="/vendors/formvalidation/dist/js/framework/bootstrap4.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#signinForm').formValidation(
                    // I am validating Bootstrap 4 form
                    framework: 'bootstrap4',

                    // Feedback icons
                    icon: {
                        valid: 'fa fa-check',
                        invalid: 'fa fa-times',
                        validating: 'fa fa-refresh',
                    },

                    // List of fields and their validation rules
                    fields: {
                        username: {
                            validators: {
                                notEmpty: {
                                    message: 'The username is required'
                                },
                                stringLength: {
                                    min: 6,
                                    max: 30,
                                    message: 'The username must be more than 6 and less than 30 characters long',
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9_]+$/,
                                    message: 'The username can only consist of alphabetical, number and underscore',
                                },
                            }
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: 'The password is required'
                                },
                                stringLength: {
                                    min: 8,
                                    message: 'The password must have at least 8 characters',
                                },
                            }
                        },
                    },
                );
            });
        </script>
    </body>
</html>

<html>
    <head>
        <!-- Optional: To use FontAwesome icons for icon plugin -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

        <!-- Required: Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />

        <!-- Required: FormValidation CSS -->
        <link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
    </head>
    <body>
        <form id="loginForm" method="POST">
            <!-- Form markup is the same as in the previous version -->
        </form>

        <!-- Required: Need es6-shim to help old browsers understand ES6 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>

        <!-- Required: FormValidation library -->
        <script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>

        <!-- Required: Plugin supports validating Bootstrap form -->
        <script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function (e) {
                FormValidation.formValidation(document.getElementById('loginForm'), {
                    fields: {
                        // Same as above
                    },
                    plugins: {
                        // Trigger validation when the field value is changed
                        trigger: new FormValidation.plugins.Trigger(),

                        // Support Bootstrap form
                        bootstrap: new FormValidation.plugins.Bootstrap(),

                        // Automatically validate the form when pressing its Submit button
                        submitButton: new FormValidation.plugins.SubmitButton(),

                        // Submit the form if all fields are valid after validating
                        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),

                        // Display various icons based on the field validity
                        icon: new FormValidation.plugins.Icon({
                            valid: 'fa fa-check',
                            invalid: 'fa fa-times',
                            validating: 'fa fa-refresh',
                        }),
                    },
                });
            });
        </script>
    </body>
</html>

Improvement

New features

• Foundation v6
• Bootstrap v4 (alpha 2) by setting framework: 'bootstrap4'
• PureCSS v0.6.0
• Semantic UI v2.1.8
• UIKit v2.26.3

Changes

Improvements

• The creditCard validator now supports more card types (Dankort, Elo, Forbrugsforeningen, Maestro International, Visa Electron)
• The ip validator now supports CIDR notation
• Return more information of the file validator result, so user can display associated message if the selected file doesn't match given extension, type or size
• Pass validator along to the status.field.fv event

Bug fixes

• Using formnovalidate attribute causes IE to send two postbacks to server
• Form cannot submit with live mode disabled (live: 'disabled') and form has some radios/checkboxes
• Fix an exception when calling destroy() if a field is replaced manually
• The cvv validator doesn't work properly if we transform the credit card value
• The phone validator should accept valid US phones such as 999 999 9999

Upgrading to v0.8.0

<!-- Bootstrap CSS v4.0.0 alpha -->
<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 src="/vendor/jquery/jquery.min.js"></script>

<!-- Tether library, which is required if you want to use Bootstrap tooltip -->
<script src="/vendor/tether/js/tether.min.js"></script>

<!-- 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/bootstrap4.min.js"></script>

<!-- Foundation v5 CSS -->
<link rel="stylesheet" href="/vendor/foundation/css/normalize.min.css" />
<link rel="stylesheet" href="/vendor/foundation/css/foundation.min.css" />

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

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

<!-- Foundation JS file -->
<script src="/vendor/foundation/js/vendor/modernizr.js"></script>
<script src="/vendor/foundation/js/foundation/foundation.js"></script>
<script src="/vendor/foundation/js/foundation/foundation.tooltip.js"></script>

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

// If your form uses Bootstrap 4 alpha
$(yourForm).formValidation({
    framework: 'bootstrap4',
    ...
});

// If your form uses Foundation 5
$(yourForm).formValidation({
    framework: 'foundation5',
    ...
});

New features

• Add new priority option that allows to set the validator execution order
• Add rst.field.fv and rst.form.fv events that are triggered after calling resetField() and resetForm() methods, respectively
• The regexp validator provides new flags option to use in declarative mode
• The remote validator supports synchronous via new async option
• The id validator now supports Turkish identification number

Improvements

• The mac validator now supports all formats of IEEE 802 standards
• Support UIKit form-password component
• The fields of fields option provided by the different validator can be separated by a comma with or without a space
• The phone validator adds support for (123) 456-7890 US phone numbers

Bug fixes

• Fix an issue caused by the date validator when the min, max options follows the same format as format
• The numeric validator accepts numbers without a preceding zero
• The ein validator now supports identification numbers that start with "47-"
• Fix the typo in German language package
• The updateMessage() method doesn't work properly if the selector contains multiple class names

New features

• Allow to use multiple instance of validators via new alias option.
• You can registry a new validator which is actually a built-in validator as following:

$(form).formValidation({
    framework: '...',
    fields: {
        username: {
            validators: {
                required: {
                    alias: 'notEmpty',
                    message: 'The username is required',
                },
            },
        },
    },
});

$(form).formValidation({
    framework: '...',
    fields: {
        password: {
            validators: {
                checkUppercase: {
                    alias: 'callback',
                    message: 'The password must have at least one uppercase character',
                    callback: function(value, validator, $field) {
                        ...
                    }
                },
                checkLowercase: {
                    alias: 'callback',
                    message: 'The password must have at least one lowercase character',
                    callback: function(value, validator, $field) {
                        ...
                    }
                },
                checkDigits: {
                    alias: 'callback',
                    message: 'The password must have at least one digit',
                    callback: function(value, validator, $field) {
                        ...
                    }
                },
                checkSpecial: {
                    alias: 'callback',
                    message: 'The password must have at least one special character',
                    callback: function(value, validator, $field) {
                        ...
                    }
                }
            }
        }
    }
});

Changes

Improvements

• integer validator accepts leading zeros
• between, greaterThan, lessThan validators now show the message where %s are replaced with the min, max, value options when the input isn't a number
• integer and numeric validators support more locales by providing new thousands and decimal separator options
• When using tooltip for multiple fields, it always shows on the last field
• Adjust the default messages when using the stringLength validator
• The Spanish id, vat validators add type to the return value. The type can be DNI, NIE or CIF.

Bug fixes

• Fix an issue on IE 10/11 that causes an input element with placeholder attribute to be validated automatically when it's focused
• Fix the bug that the isValidContainer() method doesn't ignore field which validators are totally disabled
• The field's enabled option doesn't work in declarative mode
• Fix the bug causing the message option for form isn't used. The plugin uses default message provided by each validator instead

New feature

• Add prevalidate.form.fv event that is triggered before validating the form

Improvements

• Improve Dutch national identification number (BSN) validator. It doesn't accept numbers which have less than 8 digits
• Add the date to return value of the date validator. We can reuse it for additional job
• The remote validator supports using $field and value in data/url callbacks
• The isbn validator adds ISBN type to the return value
• The ismn validator adds ISMN type to the return value

Bug fixes

• Fix an issue on IE 10/11 that causes an input element with placeholder attribute to be validated automatically when it's focused
• Fix an issue that causes the validating icon to not shown when the field is being validated

New features

• Add new promise validator
• Add STATUS_IGNORED status. The field will be ignored for the current validation if the validator returns null
• iban validator adds new sepa option that requires the IBAN number must be (or not) from the SEPA countries
• iban validator now supports East Timor, Kosovo countries

Improvements

• date validator supports dot (.) separator for European countries
• iban validator will return false if the country is not supported
• Allow to use callback for field's excluded option
• Skip validation on button using formnovalidate attribute
• Add more examples for iban test suite
• The field container and its feedback icon don't have success/error class if all field validators are disabled

Bug fixes

• Spanish VAT validator doesn't work with some examples
• Override the options when adding field
• The Brazilian id validator (CPF) number must have 11 digits
• The updateMessage() method must return the plugin instance for chaining
• When calling resetField(true) and resetForm(true) methods, the field need be reset value before updating the status

New features

• Add dataType, crossDomain, validKey options for remote validator.
• It's possible to use remote validator to connect to external validator API, such as MailGun.
• In addition to Bootstrap, Foundation, Pure, Semantic, UIKit, v0.6.1 provides the ability of supporting custom framework
• Add declarative option to support big form
• Add Netherlands phone validator
• Add Bulgarian zipCode validator
• Add Bulgarian phone number validator
• Add Polish zipCode and id validator validators

Improvements

• The remote validator fails if Ajax request fails
• Update Netherlands phone number validator
• Add plugin instance to the 3rd parameter of transformer callback
• Add Grunt task that runs the jasmine test suites

Bug fixes

• This version fixed the isValid() method which should return null when there is not validated or being validated field.
• It also solves the issues where the submit button is disabled even when the form is valid.
• The remote validator and isValid() combined do not work
• Submit button is disabled
• Submit button being disabled
• Can only submit form after changing a value
• Remote validation trigger err.form.fv
• Submit incorrectly enabled even though form has errors
• Show the validating icon when the field is being validated
• Reset checkbox when calling resetForm() method
• Fix Slovakia phone number validator
• Fix the issue where custom validator doesn't provide default message
• Don't continue if there is no validators attached to fields
• The transformer option doesn't work with notEmpty validator
• Fix isValidContainer() and validateContainer() methods to support fields with the same name

New features

• Bootstrap
• Foundation
• Pure
• Semantic UI
• UIKit
• Add transformer option, allowing to hook the value of field before validating
• Support add-on
• Support Zurb Foundation framework
• Support UI Kit framework
• Support Semantic UI framework
• Support Pure framework
• Add setLocale() and getLocale() methods to support multiple languages
• Add validateContainer() method
• Add UAE phone number validator
• Add ein validator
• Add bic validator
• Add composer.json file
• Add err, icon, row options
• Add Spanish postal code validator
• Support Spanish CIF validator
• Add India phone number validator
• Add India postal code validator

Changes

• Remove hexColor validator. Use color validator instead
• Change event error.x.x to err.x.x to avoid window.onerror being invoked by jQuery
• Remove tab behavior from base class

Improvements

• Look for the field inside form first when using selector
• Add allowEmptyProtocol option to set optional protocol in uri validator
• Improve identical validator
• Show the credit card icon based on its type
• Showing tooltip/popover when moving over or clicking the feedback icon (Bootstrap 3.3.0)
• Use jQuery instead of window.jQuery
• Allow to reuse data which is returned by the validator
• Don't need to set the different validator for both fields
• Improve the CPF validator
• Add sample data for CPF validator
• Improve Spanish phone validator validator
• Improve Slovenian vat number validator
• Improve tooltip style when working with Semantic UI form
• Fix destroying Semantic UI popup
• Fix typo in UIKit class
• Validators return true for not supported countries
• Support to use a Date object as value for min and max options
• Improve cvv validator
• uri validator gets slower if more than 25 characters
• The isValidContainer() method should return null if the container consists of at least one field which is not validated yet or being validated

Bug fixes

• The cusip validator doesn't work
• Fix the date validator issue where accepts 2014-11-1 23: as valid YYYY-MM-DD h:m date
• The color validator doesn't provide html5Attributes mapping
• Update Brazil id validator validator to support working with Mask plugin
• Fix the icon without label class
• identical validator allows to compare with any input
• Fix validateContainer() to use map value instead of key
• Show the validating icon when the field is being validated
• Fix bug of US phone number validator

Upgrading to v0.6.0

<!-- 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 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 src="/vendor/bootstrapvalidator/dist/js/bootstrapValidator(.min).js"></script>

<!-- 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 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>

// 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));

// v0.5.3
$(form).bootstrapValidator({
    container: 'tooltip',
    feedbackIcons: {
        valid: '...',
        invalid: '...',
        validating: '...'
    },
    group: 'td',
    submitButtons: '#submitButton'
});

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