Version 1.0.0

Released 10 June 2018

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 (which powers this website), etc.
  • Built on plugin based architecture. The core libary is very lighweight. Everything else is plugin
  • 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:

    or with ES6 module, server side frameworks such as 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. See the demo below.

Support more CSS frameworks

This version brings more supports for popular CSS frameworks via new plugins:

Plugin Support CSS framework
Bootstrap Bootstrap v4.1.1
Bootstrap3 Boostrap v3.3.7
Bulma Bulma v0.7.1
Foundation Zurb Foundation v6.4.3
Pure PureCSS v1.0.0
Semantic Semantic UI v2.3.1
Shoelace Shoelace v1.0.0-beta24
Spectre Spectre v0.5.1
Tachyons Tachyons v4.9.1
Uikit UIKit 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:

    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


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:

Options Plugin
autoFocus AutoFocus
err: 'tooltip' Tooltip
icon Icon
row Message
threshold Trigger
trigger Trigger
  • button
  • excluded
  • live
  • message
  • verbose

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 option Plugin
framework: 'bootstrap' Bootstrap 3
framework: 'bootstrap4' Bootstrap
framework: 'foundation' Foundation
framework: 'foundation5' Zurb Foundation 5 isn't supported anymore
framework: 'pure' Pure
framework: 'semantic' Semantic
framework: 'uikit' Uikit

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.


The old add-ons are replaced with new plugins.

Old add-on Plugin
i18n L10n
mandatoryIcon MandatoryIcon
reCaptcha1 It isn't supported anymore
reCaptcha2 Recaptcha


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.

addField() addField()
getFieldElements() getElements()
getOptions() getFields()
removeField() removeField()
resetField() resetField()
resetForm() resetForm()
revalidateField() revalidateField()
updateOption() updateValidatorOption()
validate() validate()
validateField() validateField()
  • defaultSubmit()
  • disableSubmitButtons()
  • getDynamicOption()
  • getInvalidFields()
  • getMessages()
  • getSubmitButton()
  • isValid()
  • isValidContainer()
  • isValidField()
  • updateMessage()
  • validateContainer()


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 event New event
added.field.fv core.field.added
err.field.fv core.field.invalid
  • err.validator.fv
  • success.validator.fv
removed.field.fv core.field.removed

Based on the field status, one of the following events is triggered:

success.field.fv core.field.valid
success.form.fv core.form.valid
  • init.field.fv
  • init.form.fv
  • prevalidate.form.fv

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):

Current version (v1.0.0):

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' Bootstrap 3
framework: 'bootstrap4' Bootstrap
framework: 'foundation' Foundation
framework: 'foundation5' Zurb Foundation 5 isn't supported anymore
framework: 'pure' Pure
framework: 'semantic' Semantic
framework: 'uikit' Uikit

If you have any problem when upgrading to v1.0.0, either try to use it fresh or drop me an email.

Download v1.0.0