Alias plugin
Allow to use multiple instances of the same validator
Usage
If you want to have multiple instances of particular validator, such as different
callback validators, the following approach doesn't work:
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
password: {
validators: {
callback: {
},
callback: {
},
callback: {
},
callback: {
},
}
},
...
},
}
);
It is a common case especially when you use an external service to validate field. The Alias plugin is handy for these scenarios. The following piece of code is the starting point to use the Alias plugin:
<html>
<head>
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<form id="demoForm" method="POST">...</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
alias: new FormValidation.plugins.Alias({
ALIAS_NAME: BUILT_IN_VALIDATOR,
}),
...
},
}
);
});
</script>
</body>
</html>
The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.
Using the npm packages
If you are using a bundler such as
Webpack,
Rollup,
Parcel or
Vite, etc., to bundle
your application, then it's recommended to use the FormValidation NPM packages.
$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-alias
- Import and use the Alias plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { Alias } from '@form-validation/plugin-alias';
formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
alias: new Alias({
ALIAS_NAME: BUILT_IN_VALIDATOR,
}),
...
},
}
);
Basic example
The following example registers various methods to validate a password by different requirements, but all of them are alias of the
callback validator:
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
password: {
validators: {
required: {
message: 'The password is required'
},
checkStrength: {
message: 'It must be more than 8 characters long',
callback: function(input) {
return input.value.length >= 8;
},
},
checkUppercase: {
message: 'It must contain at least one uppercase character',
callback: function(input) {
return input.value != input.value.toLowerCase();
},
},
checkLowercase: {
message: 'It must contain at least one lowercase character',
callback: function(input) {
return input.value != input.value.toUpperCase();
},
},
checkDigit: {
message: 'It must contain at least one digit',
callback: function(input) {
return input.value.search(/[0-9]/) >= 0;
},
},
}
},
},
plugins: {
...
alias: new FormValidation.plugins.Alias({
required: 'notEmpty',
checkStrength: 'callback',
checkUppercase: 'callback',
checkLowercase: 'callback',
checkDigit: 'callback',
}),
},
}
);
The Alias plugin gives you the beauty of code because you can split complicate logic into different, smaller, more maintainable parts as seen above.
See also
Changelog