Features

Scalable code base

  • • Completely rewrite in ES6.
  • • Type safety. Entire code are made in TypeScript.
  • • High code quality via popular analysis tools such as TSLint.
  • • Zero dependencies. No jQuery. But if you are a fan of jQuery, we provide a built in plugin named J to use with it nicely.
  • Play nicely with other libraries. It has useful APIs to integrate with another libraries.

Flexible

• Plugin architecture. Lightweight core. Everything else is plugins. You can register plugin on the fly as well.


FormValidation.formValidation(formElement, {
    fields: {
        ...
    },
    plugins: {
        trigger: new FormValidation.plugins.Trigger(),
        submit: new FormValidation.plugins.SubmitButton(),
        bootstrap: new FormValidation.plugins.Bootstrap(),
        icon: new FormValidation.plugins.Icon({
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh',
        }),
    },
});
  • • Provide a lot of events that you can hook on. They are triggered when a field (form) is valid, invalid or being validated.
  • • Support dynamic fields.

Well tested

• All validators, algorithms, and APIs are tested carefully with +400 Mocha unit tests.

+400 unit tests

import { expect } from 'chai';
import isbn from '../../src/js/validators/isbn';

describe('Test isbn validator', () => {
    it('isbn10 hyphen', () => {
        const samples = [
            '99921-58-10-7', '9971-5-0210-0',
            '960-425-059-0', '80-902734-1-6',
        ];
        samples.forEach(sample => {
            const result = isbn().validate({ value: sample });
            expect(result.valid).to.be.true;
        });
    });
});

• Cover hundreds of end-to-end test cases against Selenium server with Nightwatch.js framework.

hundreds of end-to-end test cases

module.exports = {
    'Test Alias plugin': (browser) => {
        browser
            .url(
                browser.launchUrl + '/demo/plugins/alias.html'
            )
            .setValue(
                'input[name="email"]',
                ['invalid.email', '']
            )
            .waitForElementVisible(
                '[data-validator][data-field="email"]', 100
            )
            .assert.containsText(
                '[data-validator][data-field="email"]',
                'The email address is not valid'
            )
            .end();
    }
};

Support any form, CSS framework

FormValidation is designed to support validating any form that uses or doesn't use with CSS framework. In addition to that, the library provides many built-in plugins which you can plug to use with popular CSS frameworks listed below:

and more landing soon.

Rich set of validators

• All validator can be used independly without defining form or field.


// In browser
const result = FormValidation.validators
    .creditCard()
    .validate({
        value: '340653705597107'
    });

// ES6 module
import creditCard from 'es6/validators/creditCard';
const result = creditCard().validate({
    value: '340653705597107'
});

Support multiple languages

  • • The default error messages of built-in validators are available in 39 language packages.
  • • Provide a plugin to switch between different locales easily.