Validators

The richest validators in the class
FormValidation comes with various built-in validators listed in alphabetical order, split into two groups as follows:

Popular validators

In most cases, this list covers validators you often need. All these validators are included in the bundle/popular(.min).js file.

Special validators

The following list includes special validators which you often don't need most of the time. In order to use them, you have to include the bundle/full(.min).js file on your page.
Look at the custom validator page to see how you can create and reuse your own validator

Using validator globally

You can use any validator globally under the namespace FormValidation.validators in the browser if the page includes the bundle/popular(.min).js or bundle/full(.min).js script.
The following sample code demonstrates how to use the creditCard validator to validate a credit card number:
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (e) {
// Now you can access the creditCard validator from
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'
});
</script>

Using validator in ES6 module

All validators are able to be imported and used with the ES6 module. It's super useful if you want to use a validator with front-end frameworks (such as React, VueJS, Svelte, .etc), or in a server environment with NodeJS frameworks (such as Express).
The following snippet shows how to use the creditCard validator with the ES6 module:
// You might need to change the importing path
import { creditCard } from '/path/to/@form-validation/cjs/validator-credit-card';
const result = creditCard().validate({
value: '340653705597107',
options: {
message: 'The credit card number is not valid',
},
});
// result.valid === true
// result.meta.type === 'AMERICAN_EXPRESS'

Using validator from npm packages

From v2.0.0, the entire FormValidation library including its validators and plugins are available as npm packages. You can install a package and use it. The following snippet shows how to use the creditCard validator.
  • Install the validator package:
$ npm install @form-validation/validator-credit-card
  • Use the creditCard validator:
import { creditCard } from '@form-validation/validator-credit-card';
const result = creditCard().validate({
value: '340653705597107',
options: {
message: 'The credit card number is not valid',
},
});