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: {
                        // Check if the password has at least one digit
                    },
                    callback: {
                        // Check if the password has at least one special character
                    },
                    callback: {
                        // Check if the password has at least one uppercase character
                    },
                    callback: {
                        // Check if the password has at least one lowercase character
                    },
                }
            },
            ...
        },
    }
);

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:




    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { alias: new FormValidation.plugins.Alias({ // Map the alias with defined validator name ALIAS_NAME: BUILT_IN_VALIDATOR, }), ... }, } ); });

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.

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({
                // The required validator is infact treated as notEmpty validator
                required: 'notEmpty',
                // These checkers are treated as callback validator
                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.

Changelog

  • v1.0.0: First release