Transformer plugin

Modify the field value before doing validation

Usage

By default, the value of field will be taken by using the value property. In some case, you might want to adjust the value before performing validations. For example, the numeric validator doesn't allow to use a comma (,) for thousand separator.

The Transformer plugin allows to filter the value of field. The following piece of code is the starting point to use the Transformer 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 src="/vendors/@form-validation/umd/plugin-transformer/index.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function(e) {
                FormValidation.formValidation(
                    document.getElementById('demoForm'),
                    {
                        fields: {
                            ...
                        },
                        plugins: {
                            transformer: new FormValidation.plugins.Transformer({
                                // Replace FIELD_NAME and VALIDATOR_NAME with the real names
                                FIELD_NAME: {
                                    VALIDATOR_NAME: function(field, element, validator) {
                                        // field is the field name
                                        // element is the field element
                                        // validator is the name of validator

                                        // Get the field value
                                        let value = element.value;

                                        // Modify the field value
                                        // ...

                                        // Returns a string which will be used as field value to be validated
                                        return value;
                                    }
                                }
                            }),
                            ...
                        },
                    }
                );
            });
        </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.

FormValidation only uses the value returned by the Transformer plugin for validating. It does NOT send the modified value to the server when submitting the form.

The next sections introduce some examples demonstrating how to apply this option for popular validators.

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.

Install the packages:

$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-transformer

Import and use the Transformer plugin:

import { formValidation } from '@form-validation/bundle/popular';
import { Transformer } from '@form-validation/plugin-transformer';

formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            transformer: new Transformer({
                ...
            }),
            ...
        },
    }
);

Using with uri validator

The following form accepts a website address without http:// or https:// prefix. By default, these kind of URLs don't pass the uri validators.

Using the Transformer plugin for the uri validator, we can make it pass.

transformer: new FormValidation.plugins.Transformer({
    website: {
        // I want to modify the website field before executing uri validator
        uri: function(field, element, validator) {
            // Get the field value
            let value = element.value;

            // Check if it does not start with http:// or https://
            if (value && value.substr(0, 7) !== 'http://' && value.substr(0, 8) !== 'https://') {
                // then prefix with http://
                value = 'http://' + value;
            }

            // Return new value
            return value;
        },
    },
}),

Using with uri validator

Using with numeric validator

By default, the numeric validator doesn't accept the comma. In the form below, the Price field now accepts value using comma for thousand separator, such as 12,570.634

transformer: new FormValidation.plugins.Transformer({
    price: {
        numeric: (field, element, validator) => {
            // Get the field value
            const value = element.value;

            // Replace all commas by empty space
            return value.replace(',', '');
        },
    },
}),

Using with numeric validator

Using with phone validator

The phone validator validator supports phone number in various countries. Despite the fact that it try to support many possible formats of a phone number, it can't cover all or special one which you want it to be a valid phone number.

For instance, a number containing the spaces such as XXX XXX XXXX (where X presents a digit from 0-9) is treated as invalid US phone number. By using the Transformer plugin, we can turn this kind of number into a valid one by removing all spaces.

transformer: new FormValidation.plugins.Transformer({
    phoneNumber: {
        phone: function(field, element, validator) {
            // Get the field value
            const value = element.value;

            // Check if the value has format of XXX   XXX   XXXX
            if (/^(\d){3}(\s+)(\d){3}(\s+)(\d){4}$/.test(value)) {
                // Remove all spaces
                return value.replace(/\s/g, '');
            } else {
                // Otherwise, return the original value
                return value;
            }
        },
    },
}),

Using with phone validator

Using with WYSIWYG editors

WYSIWYG stands for What You See Is What You Get. A WYSIWYG editor provides a visual way to edit the content of input which mostly is a textarea element.

Since these editors usually generate additional HTML tags, the raw content of input might be different with the value returned by the editor. The notEmpty, stringLength validators maybe don't work correctly with the field using a WYSIWYG editor.

The following form uses the Transformer plugin to get raw text of a TinyMCE editor before doing validations.

transformer: new FormValidation.plugins.Transformer({
    comment: {
        stringLength: function(field, element, validator) {
            // Get the plain text without HTML
            return tinyMCE.activeEditor.getContent({ format: 'text' });
        },
    },
}),

Using with WYSIWYG editors

Changelog

v2.4.0

The plugin can be enabled or disabled using the enablePlugin and disablePlugin methods

v2.0.0

Add the npm package

v1.0.0

First release

Tooltip plugin Trigger plugin

Transformer plugin

Usage

Using the npm packages

Using with uri validator

Using with numeric validator

Using with phone validator

Using with WYSIWYG editors

See also

Changelog