Updates

18 Jun, 2023

Version 2.4.0

New features

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');
FormValidation.formValidation(form, {
fields: {...},
plugins: {
turnstile: new FormValidation.plugins.Turnstile({
...
}),
},
});

Bug fix

  • Fix an issue that happens when a field name contains double quotes
04 Jun, 2023

Version 2.3.0

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,
}),
...
},
}
);
The option is set to true by default.

Improvement

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

Version 2.2.0

New feature

FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
...
hiddenPhoneInput: 'fullPhoneNumber',
}),
...
},
}
);
The plugin will add a hidden input named fullPhoneNumber to the form. If the corresponding input is valid, then the hidden input has the value of the full phone number. Otherwise, its value is set to empty.

Bug fixes

<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" />
06 May, 2023

Version 2.1.0: New esm format

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

23 Apr, 2023

Version 2.0.2: npm packages

New features

  • The entire library is available as npm packages.
PackageDescription
@form-validation/bundleBundle core plugins and popular validators. See the next section for more details
@form-validation/coreThe core of the library
@form-validation/localesThe translation packages
@form-validation/plugin-[plugin-name]The given plugin where [plugin-name] represents the name of the plugin
@form-validation/stylesThe CSS styles
@form-validation/validator-[validator-name]The given validator where [validator-name] represents the name of the validator
Refer to each plugin or validator to see the installation and usage of the associated npm package.
  • 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

Breaking changes

v2.0.0 changes the folder structure due to two reasons:
  • 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.
v2.0.0 fixes those issues. All the amd, cjs and umd packages now follow the same folder structure.
  • Uikit plugin is renamed to UiKit

Upgrade to v2.0.0

You have to update the path to the given scripts, for example:
<!-- 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>
Here is the full list of paths that are changed in v2.0.0.
Path to the main styles
Old pathNew path
/formvalidation/dist/css/formValidation.css/@form-validation/umd/styles/index.css
/formvalidation/dist/css/formValidation.min.css/@form-validation/umd/styles/index.min.css
Path to the popular and full bundles
Old pathNew path
/formvalidation/dist/js/FormValidation.js/@form-validation/umd/bundle/popular.js
/formvalidation/dist/js/FormValidation.min.js/@form-validation/umd/bundle/popular.min.js
/formvalidation/dist/js/FormValidation.full.js/@form-validation/umd/bundle/full.js
/formvalidation/dist/js/FormValidation.full.min.js/@form-validation/umd/bundle/full.min.js
Path to plugins
Old pathNew path
/formvalidation/dist/js/plugins/Bootstrap.js/@form-validation/umd/plugin-bootstrap/index.js
/formvalidation/dist/js/plugins/Bootstrap.min.js/@form-validation/umd/plugin-bootstrap/index.min.js
/formvalidation/dist/js/plugins/PasswordStrength.js/@form-validation/umd/plugin-password-strength/index.js
/formvalidation/dist/js/plugins/PasswordStrength.min.js/@form-validation/umd/plugin-password-strength/index.min.js
Path to validators
Old pathNew path
/formvalidation/dist/js/validators/vat.js/@form-validation/umd/validator-vat/index.js
/formvalidation/dist/js/validators/vat.min.js/@form-validation/umd/validator-vat/index.min.js
/formvalidation/dist/js/validators/zipCode.js/@form-validation/umd/validator-zip-code/index.js
/formvalidation/dist/js/validators/zipCode.min.js/@form-validation/umd/validator-zip-code/index.min.js
Path to locales
Old pathNew path
/formvalidation/dist/js/locales/en_US.js/@form-validation/umd/locales/en_US.js
/formvalidation/dist/js/locales/en_US.min.js/@form-validation/umd/locales/en_US.min.js
UiKit plugin
If you're using the UiKit plugin, then don't forget to rename it.
// Before v2.0.0
FormValidation.plugins.Uikit();
// v2.0.0
FormValidation.plugins.UiKit();
21 Aug, 2022

Version 1.10.0

New feature

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
});
The e parameter contains the following properties:
PropertyTypeDescription
elementsHTMLElement[]The array of current field elements
fieldStringThe field name
formValidationCoreThe FormValidation instance
validator?StringThe validator name

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>
You also can query the buttons and pass them to the Wizard plugin options:
const fv = FormValidation.formValidation(form, {
plugins: {
wizard: new FormValidation.plugins.Wizard({
prevButton: document.getElementById('prevButton'),
nextButton: document.getElementById('nextButton'),
}),
},
});
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.
04 Oct, 2021

Version 1.9.0

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
});
},
});
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);
});
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

03 Jun, 2021

Version 1.8.1

Improvement

Bug fixes

TypeScript definition

  • Change ValidateFunction to ValidateFunction<ValidateOptions>
16 May, 2021

Version 1.8.0: Support Bootstrap 5

New feature

Bug fixes

01 Oct, 2020

Version 1.7.0

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

It's useful in case we have an external button which is outside of the form:
<form id="demoForm">...</form>
<!-- External button -->
<button type="button" id="externalButton" />
We pass the new buttons option to the SubmitButton plugin. It is a function that accepts the current form element, and returns the list of button elements.
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: ...,
plugins: new FormValidation.plugins.SubmitButton({
buttons: function(form) {
return [].slice.call(document.getElementById('externalButton'));
},
}),
}
);
By default, the buttons option will query all submit buttons (type="submit") inside the form.
  • 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

Upgrading to v1.7.0

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

Version 1.6.0: AMD package

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

Fix the placeholder message in validators:

Breaking change

Upgrading to v1.6.0

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

Version 1.5.0

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');
}
}),
...
}
});
The previous version, Google reCAPTCHA v2, is still supported by the Recaptcha plugin

Improvements

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>

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:
ReplaceWith
FormValidation.Status.Ignored'Ignored'
FormValidation.Status.Invalid'Invalid'
FormValidation.Status.NotValidated'NotValidated'
FormValidation.Status.Valid'Valid'
FormValidation.Status.Validating'Validating'
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-auto-focus/index.min.js"></script>
20 Apr, 2019

Version 1.4.0

New features

The id validator validator supports validating more national identification numbers, including:
  • 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>
It serves the same functionalities such as declaring plugins as
<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.
In the previous versions, you need to import the whole id package if you only want to validate the identification number of particular country:
// 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',
},
});
This version provides the specfic module for each country. As the result, it saves a lot of size when your application is bundled with popular bundlers as Webpack, Rollup, etc.
// 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
10 Aug, 2018

Version 1.3.0

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

15 Jul, 2018

Version 1.2.0: Supports more CSS frameworks

New features

This version supports more CSS frameworks:
PluginSupported CSS framework
Materialize pluginMaterializeCSS v1.0.0-rc.2
Milligram pluginmilligram v1.3.0
Mini pluginmini.css v3.0.0
Mui pluginMUI v0.9.39
Turret pluginturretcss v4.1.4

Improvements

Supports the latest verfions of the following CSS frameworks:
PluginSupported CSS framework
Bootstrap pluginBootstrap v4.1.2
Semantic pluginSemantic UI v2.3.3
Spectre pluginSpectre v0.5.3
Tachyons pluginTachyons v4.10.0
Uikit pluginUIKit v3.0.0-rc.8
08 Jul, 2018

Version 1.1.0

This verion brings support for Internet Explorer 11 (because the previous version is compiled to ES6 compatible code which doesn't work in Internet Explorer 11).
It also adds new plugins to support better user experience such as:
  • 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
For more details, take a look at the next sections.

New features

  • New Sequence plugin
By default, all validators for given field will perform their jobs after each key stroke. In the previous version, there is no way for us to control the order of their executions.
The Sequence plugin allows us to pending the execution of a validator until all previous validators are pass.
  • New StartEndDate plugin
The StartEndDate plugin is very handly if you want to validate start and end dates. We can use it with or without a date picker library.
  • Support invisible reCAPTCHA
  • Improve Trigger plugin
The Trigger plugin adds a new delay option that supports pending validation for a given number of seconds after user stops filling in the field.

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
29 Jun, 2018

Version 1.0.1

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
10 Jun, 2018

Version 1.0.0: Plugin based architecture

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'
or with ES6 module, server side frameworks such as 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
Support more CSS frameworks
This version brings more supports for popular CSS frameworks via new plugins:
PluginSupport CSS framework
Bootstrap pluginBootstrap v4.1.1
Bootstrap3 pluginBoostrap v3.3.7
Bulma pluginBulma v0.7.1
Foundation pluginZurb Foundation v6.4.3
Pure pluginPureCSS v1.0.0
Semantic pluginSemantic UI v2.3.1
Shoelace pluginShoelace v1.0.0-beta24
Spectre pluginSpectre v0.5.1
Tachyons pluginTachyons v4.9.1
Uikit pluginUIKit v3.0.0-beta.42
New website
The old version of the official website is powered by Jekyll. Since it comes from the Ruby world, it isn't easy for me when I want to customize something. I looked for another solutions for creating a documentation website, and the final answer is Sapper.
  • 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.
The following sample uses a component called Framework to display list of supported CSS frameworks in the home page:
<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>
No more Jekyll's include!
  • 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

Options
From this version, we moved the long list of options in old jQuery plugin to separated, smaller plugins. Look at the table below to upgrade the old options to new plugin:
OptionsPlugin
autoFocusAutoFocus plugin
err: 'tooltip'Tooltip plugin
iconIcon plugin
rowMessage plugin
thresholdTrigger plugin
triggerTrigger plugin
buttonRemoved
excludedRemoved
liveRemoved
messageRemoved
verboseRemoved
The old version provides an option named framework to support form made in given CSS framework. v1.0.0 also supports native form without using any CSS framework. Also, the framework is removed and supporting CSS frameworks are served via the following plugins:
Old framework optionPlugin
framework: 'bootstrap'Bootstrap3 plugin
framework: 'bootstrap4'Bootstrap plugin
framework: 'foundation'Foundation plugin
framework: 'foundation5'Zurb Foundation 5 isn't supported anymore
framework: 'pure'Pure plugin
framework: 'semantic'Semantic plugin
framework: 'uikit'Uikit plugin
Declarative mode
The previous version automatically turns the HTML attributes of a field element, data-fv-notempty="true" for example, to associated validator rules. In v1.0.0, you have to enable the Declarative plugin.
Default language package
Before v1.0.0, you can lazily ignore the message option and all the error messages are taken from the English translation package by default. From this version, the core library (FormValidation(.min).js) doesn't consist of any language package, including English package. You have to load them manually. See the Localization page for more details.
Add-ons
The old add-ons are replaced with new plugins.
Old add-onPlugin
i18nL10n plugin
mandatoryIconMandatoryIcon plugin
reCaptcha1It isn't supported anymore
reCaptcha2Recaptcha plugin
APIs
In v1.0.0, we consider every APIs carefully. Some public methods from old version are changed or removed completely because they don't match with new architecture. Look at the table below if you want to upgrade the API.
Old APINew API
addField()addField() method
enableFieldValidators()disableValidator() method
enableValidator() method
getFieldElements()getElements() method
getOptions()getFields() method
removeField()removeField() method
resetField()resetField() method
resetForm()resetForm() method
revalidateField()revalidateField() method
updateOption()updateValidatorOption() method
updateStatus()updateElementStatus() method
updateFieldStatus() method
validate()validate() method
validateField()validateField() method
defaultSubmit()Removed
disableSubmitButtons()Removed
getDynamicOption()Removed
getInvalidFields()Removed
getMessages()Removed
getSubmitButton()Removed
isValid()Removed
isValidContainer()Removed
isValidField()Removed
updateMessage()Removed
validateContainer()Removed
Events
From v1.0.0, you can't use a declarative mode to declare event handler. We also change the naming convention of core events to core.[form/field/validator].[event]. The plugin event is named as plugins.[pluginName].[event].
Old eventNew event
added.field.fvcore.field.added event
err.field.fvcore.field.invalid event
err.validator.fvcore.validator.validated event
success.validator.fvcore.validator.validated event
removed.field.fvcore.field.removed event
status.field.fvcore.field.invalid event
core.field.valid event
core.field.validating event
success.field.fvcore.field.valid event
success.form.fvcore.form.valid event
init.field.fvRemoved
init.form.fvRemoved
prevalidate.form.fvRemoved

Upgrading to v1.0.0

In general, in order to upgrade from the old jQuery plugin to v1.0.0, you have to:
  • Upload v1.0.0 files to your server
  • Convert options in previous verion to associated plugin
You also should take a look at the Breaking changes above. The sample codes below show how previous and current version are used to validate a form which is made with Bootstrap 4.
Previous version (v0.8.1):
<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>
Current version (v1.0.0):
<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>
Again, please take a careful look at the new plugin associating with the framework option in previous version:
Old framework option (v0.8.1)Plugin (v1.0.0)
framework: 'bootstrap'Bootstrap3 plugin
framework: 'bootstrap4'Bootstrap plugin
framework: 'foundation'Foundation plugin
framework: 'foundation5'Zurb Foundation 5 isn't supported anymore
framework: 'pure'Pure plugin
framework: 'semantic'Semantic plugin
framework: 'uikit'Uikit plugin
If you have any problem when upgrading to v1.0.0, try to use it fresh.
27 Sep, 2016

Version 0.8.1

Improvement

27 Jun, 2016

Version 0.8.0

New features

This version of [FormValidation(/purchase) works with the latest versions of supported frameworks, including:
  • Foundation v6
  • Bootstrap v4 (alpha 2) by setting framework: 'bootstrap4'
  • PureCSS v0.6.0
  • Semantic UI v2.1.8
  • UIKit v2.26.3

Changes

If you want to try Bootstrap 4 alpha 2 or still want to use Foundation 5, you need to follow the Upgrading to v0.8.0 section below.

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

You need to perform the following changes if you want to try Bootstrap 4 (alpha) or still want to use Foundation 5:
Step 1: Including the correct files
This section is already mentioned in the Including library section:
Use with Bootstrap:
<!-- 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>
Don't confuse bootstrap(.min).js file provided by the Bootstrap framework with bootstrap4(.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.
Use with Foundation:
<!-- 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>
Don't confuse foundation(.min).js file provided by the Foundation framework with foundation5(.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
Step 2: Setting the framework option
You need to set the framework option as following:
// If your form uses Bootstrap 4 alpha
$(yourForm).formValidation({
framework: 'bootstrap4',
...
});
// If your form uses Foundation 5
$(yourForm).formValidation({
framework: 'foundation5',
...
});
01 Feb, 2016

Version 0.7.1

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

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
01 Aug, 2015

Version 0.7.0

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',
},
},
},
},
});
or use multiple instance of same validators (for example, callback validator, as following piece of code):
$(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

Change the file name and definition of some language packages:
OldNew
be_FRfr_BE
be_NLnl_BE
gr_ELel_GR

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
31 May, 2015

Version 0.6.3

New feature

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

Improvements

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
02 Apr, 2015

Version 0.6.2

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
24 Feb, 2015

Version 0.6.1

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
06 Jan, 2015

Version 0.6.0: Rename to FormValidation

New features

From v0.6.0, the plugin has new name: FormValidation. It supports validating form created by many frameworks including

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

Upgrading to v0.6.0

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.
In v0.5.3:
<!-- 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>
In 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 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.3v0.6.0
Use data-bv-xxx attributeUse data-fv-xxx attribute
Form settings
v0.5.3v0.6.0
containererr.container
feedbackIconsicon
grouprow.selector
submitButtonsbutton.selector
// 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'
}
});
Field settings
v0.5.3v0.6.0
containererr
feedbackIconsicon
grouprow
// v0.5.3
$(form).bootstrapValidator({
fields: {
fieldName: {
container: 'tooltip',
feedbackIcons: false,
group: '.col-sm-3',
validators: {
...
}
}
}
});
// v0.6.0
$(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.3v0.6.0
init.form.bvinit.form.fv
error.form.bverr.form.fv
success.form.bvsuccess.form.fv
added.field.bvadded.field.fv
removed.field.bvremoved.field.fv
init.field.bvinit.field.fv
error.field.bverr.field.fv
success.field.bvsuccess.field.fv
status.field.bvstatus.field.fv
error.validator.bverr.validator.fv
success.validator.bvsuccess.validator.fv
The last thing, the hexColor validator, deprecated in v0.5.3, is replaced with color validator.
05 Nov, 2014

Version 0.5.3

New features

Improvements

  • The color validator only accepts 6 hex character values when using HTML 5 type='color' attribute
  • Comma separator handling in greaterThan validator, lessThan validator validators
  • Replace ',' with '.' to validate decimal numbers correct
  • Put tooltip/popover on bottom if there is not enough space on top
  • The remote validator allows to set data options via HTML attributes
  • Enable validator when setting data-bv-validatorname="data-bv-validatorname"
  • Requires jQuery 1.9.1 or higher

Bug fixes

  • Fix double submit with defered validators
  • Tooltip/popover isn't destroyed when the field is valid
  • The field is validated only one time when setting trigger: 'blur', container: 'tooltip'
  • Fix isValidField() and validateField() methods for fields without validators
  • Fix the issue when using multiple fields with same name, the tooltip of the last element is always shown
  • The error.field.bv event isn't triggered if verbose is set to false
  • The verbose option for field doesn't override the form level
25 Sep, 2014

Version 0.5.2

New features

  • Add verbose option
  • Add blank validator
  • Add init and destroy methods to validator
  • Add Venezuelan VAT number (RIF) validator
  • Add China phone number validator
  • Add Venezuela phone number validator
  • Add Romania phone number validator
  • Add Romania postal code validator
  • Add Denmark phone number validator
  • Add Thailand phone number and ID validator
  • Add Chinese citizen ID validator>
  • Add Russia phone number validator
  • Add Russian postal code validator
  • Add Czech and Slovakia phone number and postal code validators

Change

Improvements

Bug fixes

  • Tabs get red even form is valid
  • Fix the emailAddress validator issue which email@server is not valid email address
  • Keep disabled validators VALID
  • Fix the issue when adding field which does not exist but is already set in fields option
  • Fix the issue when removing the radio or checkbox field
  • The form is still submitted when clicking on submit button which is set onclick="return false;"
  • Using notEmpty validator with type="number"
  • The tooltip/popover isn't shown if there is disabled validator. The tooltip/popover is shown automatically when the field gets the focus
  • Can't validate ipv4 and ipv6 at the same time. Add ip validator test suite
  • Fix Russian vat number validator
  • The form won't be validated if the submit button contains a HTML tag

Upgrading from v0.5.x to v0.5.2

If you don't use the remote validator, just download v0.5.2 package and override the CSS/JS bundle.
Otherwise, please indicate the type option when using remote validator:
$(form).bootstrapValidator({
fields: {
username: {
message: 'The username is not valid',
validators: {
// The validator will create an Ajax request
// sending { username: 'its value' } to the back-end
remote: {
message: 'The username is not available',
url: '/path/to/backend/',
type: 'GET', // or 'POST'
},
},
},
},
});
22 Aug, 2014

Version 0.5.1

New features

Improvements

  • Add headers option to the remote validator
  • Add content-type header for demo/remote.php
  • Allowing sites without TLD to pass URI validation
  • Change the CSS/JS path in demo/remote.html and demo/message.html
  • Fix the demo/date.html and demo/tab.html examples
  • Fix the feedback icon position for Bootstrap 3.2
  • Force the format option to be YYYY-MM-DD when using &lt;input type="date" /&gt;
  • Ignore type checking if the file type is empty

Bug fixes

  • Cannot validate against both ipv4 and ipv6 at the same time
  • Don't use min, max attributes (greaterThan, lessThan validators) for &lt;input type="date" /&gt;
  • Fix the date validator issue where one of date/month/year or hours/minutes/seconds is prefixed by zero
  • Fix the issue when using different validator to compare with not existing field
  • The between, greaterThan, lessThan validators accept param which isn't number
  • The HTML 5 <input type="number" > input allows to input non-digits characters
  • The remote validator can't set the type option via HTML attribute
  • The submitButtons option doesn't work correctly
  • The zipCode validator throw an exception when passing not supported country code
14 Jul, 2014

Version 0.5.0

New features

Error message:
  • Provide the default message
  • Support translating error messages
  • Support dynamic message
Events:
  • Add events for form
  • Add events for field
  • Add events for validator
Support dynamic option:
Support dynamic fields:
  • Support dynamic fields
  • Add the addField() and removeField() methods for managing dynamic fields
New options:
  • Add new container option for indicating the element showing all errors
  • Add new enabled option enable/disable particular validator
  • Add new excluded option to exclude particular field
  • Add new feedbackIcons option to enabled/disable feedback icons for particular fields
  • Add new group option
  • Showing errors in tooltip or popover
New APIs:
  • Add new destroy() method
  • Add new getInvalidFields() method that returns all invalid fields
  • Add new isValidContainer() method
  • Add new isValidField() method
  • Add new revalidateField() method
  • Add new resetField() method
  • Add new updateMessage() method
  • Add new updateOption() method for updating the particular validator option
Misc:

Changes

  • $.fn.bootstrapValidator.helpers renames mod_11_10 to mod11And10, mod_37_36 to mod37And36
  • Remove the submitHandler option

Improvements

  • Add built time to the build file
  • Add JSHint to Grunt build
  • Add test suite
  • Adjust the feedback icon position for .input-group element
  • Allow to override the default options. Useful for using multiple forms in the same page
  • Clicking the feedback icon also effect to the checkbox, radio fields
  • Define the callback via data-bv-callback-callback attribute
  • Don't change the enable setting when the new one is the same
  • Fix feedback icons in input-group
  • Improve the updateStatus() method. The plugin now doesn't show the errors, feedback icons of given field if there are uncompleted validators
  • Only enable the submit buttons if all fields are valid
  • Only send the submit button which is clicked
  • The remote validator adds support for dynamic url and method type (GET/POST)
  • The uri validator now provides an option to support private/local network address
  • Validation of numeric fields with decimal steps

Bug fixes

  • Added the letters 'H', 'W' and 'Z' in letter list for Canada postal code
  • Custom trigger event is ignored by field validators
  • Don't submit form when the callback validator completes and the submit button isn't clicked
  • file validation extension is case sensitive
  • Fix the date validator issue on IE8
  • Fix the file validator issue on IE 8
  • Fix the ean validator when the check digit is zero
  • Fix the identical validator issue with not clearing has-error class
  • Fix the inclusive option in the between, greaterThan and lessThan validators
  • Fixed Chilean ID (RUT/RUN) finished in 'K' or 'k'
  • IPv6 validator doesn't work
  • stringLength validator allows spaces after max length
  • Skip the _isExcluded() when initializing the form
  • The creditCard validator doesn't work on IE 8
  • The cvv validator doesn't work on IE 8
  • The date validator still return valid if the value doesn't contain digits
  • The id, vat validators should return false if the country code is not supported
  • The threshold option doesn't work on IE 8
  • The zipCode validator doesn't work for Canadian zip code
  • When using multiple forms with HTML attributes on the same page, the plugin options will be the same as the last one

Upgrading to v0.5.0

From v0.5.0, we remove the submitHandler option. In v0.5.0, use the success.form.bv event instead.
In v0.4.5 and earlier versions:
$(form).bootstrapValidator({
submitHandler: function(form, validator, submitButton) {
...
}
});
In v0.5.0:
$(form)
.bootstrapValidator({
// Removing submitHandler option
})
.on('success.form.bv', function (e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
validator = $form.data('bootstrapValidator'),
submitButton = validator.getSubmitButton();
// Do whatever you want here ...
});
15 May, 2014

Version 0.4.5

New features

Improvements

  • Change default submitButtons to [type="submit"] to support input type="submit"
  • The cvv validator should support spaces in credit card
  • The zipCode validator adds support for Italian, Dutch postcodes

Bug fixes

  • Fix the conflict issue with MooTools
  • Fix the issue that the hidden fields generated by other plugins might not be validated
  • Plugin method invocation don't work
  • The iban validator does not work on IE8
  • The submit buttons are not sent
  • When parsing options from HTML attributes, don't add the field which hasn't validators
05 May, 2014

Version 0.4.4

New features

Improvements

  • Add UK postcode support for the zipCode validator
  • Indicate success/error tab
  • Support using both the name attribute and selector option for field
  • The date validator supports seconds

Bug fixes

26 Apr, 2014

Version 0.4.3

New features

Improvements

Bug fixes

  • Fix IE8 error
  • Plugin method invocation
  • The excluded: ':disabled' setting does not work on IE 8
  • The isbn validator accepts letters and special characters
19 Apr, 2014

Version 0.4.2

New features

Improvements

Bug fix

  • Do not validate fields that enabled is set to false
12 Apr, 2014

Version 0.4.1

Improvements

  • Add support for element outside of form using the selector option
  • Doesn't trigger validation on the first focus
  • Prevent the validate() method from submit the form automatically. So we can call the validate() method to validate the form
  • The phone validator now also checks the length of US phone number
  • The row state is now only marked as success if all fields on it are valid
  • User doesn't need to submit the form twice when the remote validator completes

Bug fixes

  • Fix an issue that the custom submit handler is not fired from the second time
  • Fix errors in IE 8
03 Apr, 2014

Version 0.4.0

New features

  • Add setLiveMode() method to turn on/off the live validating mode
  • Add new hex validator
  • Add new iban validator for validating IBAN (International Bank Account Number)
  • Add new integer validator
  • Add new numeric validator
  • Add new stringCase validator to check a string is lower or upper case
  • Add new uuid validator, support UUID v3, v4, v5
  • Set the custom trigger event. It's possible to use the data-bv-trigger attribute or the trigger option
  • Set validator option by using HTML 5 attributes
  • Support HTML 5 input types
HTML 5 attributeEquivalent validator
min="..."greaterThan validator
max="..."lessThan validator
maxlength="..."stringLength validator
pattern="..."regexp validator
requirednotEmpty validator
type="color"color validator
type="email"emailAddress validator
type="range"between validator
type="url"uri validator

Changes

  • The disableSubmitButtons() method is now marked as a public API
  • The first parameter of updateStatus() method now accepts the field name only

Improvements

  • Do not validate hidden (type="hidden") and invisible elements
  • Support multiple elements with the same name
  • The regexp validator allows to pass a string

Bug fixes

  • The fields.[fieldName].message option is not used when showing the error message
  • The submit button remains disabled after calling custom submitHandler and the form is valid
27 Mar, 2014

Version 0.3.3

Improvements

  • Don't validate disabled element
  • Handle case where a field is removed after the bootstrap validation

Bug fixes

  • Cannot call form.submit() inside submitHandler
  • The notEmpty validator doesn't work on file input
21 Mar, 2014

Version 0.3.2

New features

  • Add new base64 validator
  • Add new container option for each field to indicate where the error messages are shown
  • Add new cvv validator
  • Add new ip validator. Support both IPv4 and IPv6
  • Add new isbn validator, support both ISBN 10 and ISBN 13
  • Add new mac validator
  • Add new phone validator. Support US phone number only
  • Add new step validator
  • Add new selector option for each field. The field can be defined by CSS validator instead of the name attribute

Improvement

17 Mar, 2014

Version 0.3.1

New features

  • Add new date validator
  • Add enabled option and enableFieldValidators() method to enable/disable all validators to given field
  • Add bower.json file

Changes

  • Remove the columns option. Now the plugin works normally no matter how many columns the form uses

Improvements

  • Improve the updateStatus() method to make the plugin play well with another
  • Support more form controls on the same row
  • The resetForm method now only resets fields with validator rules

Bug fixes

  • The error messages aren't shown if the form field doesn't have label
  • The submitHandler or default submission isn't called after remote validation completes
10 Mar, 2014

Version 0.3.0

New features

  • Add choice validator
  • Add method to validate form manually
  • Add optional feedback icons
  • Add resetForm() method
  • Rewrite entirely using Deferred

Improvements

  • Add example for Rail field convention
  • Add submit button to submitHandler() parameter
  • Describe which version should be included in the Usage section
  • Disable submit button on successful form submit
  • Don't validate disabled element
  • Show all errors
  • Support custom grid columns
  • Support Danish zip code
  • Support Sweden zip code
  • The remote validator supports dynamic data
  • Update the installation guide

Bug fixes

07 Jan, 2014

Version 0.2.2

Improvements

  • Focus to the first invalid element
  • Only validate not empty field
  • The remote validator allows to set additional data to remote URL
  • Validate existing fields only

Bug fixes

  • Avoid from calling form submit recursively
  • Fix the issue when the form label doesn't have class
08 Nov, 2013

Version 0.2.1

Improvements

  • Hide the error block containers before validating
  • Upgrade Bootstrap to v3.0.2
21 Oct, 2013

Version 0.2.0

New features

Improvement

  • Support form that labels are placed in extra small (col-xs-), small (col-sm-), medium (col-md-) elements

Bug fix

17 Oct, 2013

Version 0.1.1

New feature

  • Added submitButtons option

Improvements

  • Added disabling client side validation in HTML 5
  • Added support for default Bootstrap form without labels
  • Added support for select box validator