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

    
    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 JavaScript module, server side frameworks such as Express:

    
    // You might need to change the importing path
    import creditCard from 'formvalidation/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. 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

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:

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

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.

Add-ons

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

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 API New API
addField() addField()
enableFieldValidators()
getFieldElements() getElements()
getOptions() getFields()
removeField() removeField()
resetField() resetField()
resetForm() resetForm()
revalidateField() revalidateField()
updateOption() updateValidatorOption()
updateStatus()
validate() validate()
validateField() validateField()
  • defaultSubmit()
  • disableSubmitButtons()
  • getDynamicOption()
  • getInvalidFields()
  • getMessages()
  • getSubmitButton()
  • isValid()
  • isValidContainer()
  • isValidField()
  • updateMessage()
  • 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 event New event
added.field.fv core.field.added
err.field.fv core.field.invalid
  • err.validator.fv
  • success.validator.fv
core.validator.validated
removed.field.fv core.field.removed
status.field.fv

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
Removed

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




    
    

    
    

    
    


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

Current version (v1.0.0):




    
    

    
    

    
    


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

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