Guide
Validators
Plugins
Examples
Updates
Purchase
Getting Started
Validators
Plugins
API
Events

Trigger plugin

Indicate the events which the validation will be executed when these events are triggered

Usage

By default, the field will be validated automatically when the input event is triggered. This plugin allows to set the specific events for given field as fllowing:
<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: {
                            trigger: new FormValidation.plugins.Trigger({
                                event: ...,
                                threshold: ...,
                                delay: ...,
                            }),
                            ...
                        },
                    }
                );
            });
        </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.

Options

OptionTypeDescription
eventString or ObjectDefine the events
The event option can be one of the following formats:
// Validate fields when the blur events are triggered
event: 'blur',


// If you need multiple events are fired,
// then separate them by a space
event: 'blur change',


// We can indicate different events for
// each particular field
event: {
    fullName: 'blur',
    email: 'change',
},


// If we do not want the field to be validated
// automatically, set the associate value to false
event: {
    // The field is only validated when we click the
    // submit button of form
    // (if the SubmitButton plugin is used)
    email: false,
},
OptionTypeDescription
thresholdNumber or ObjectOnly perform the validation if the field value exceed this number of characters. By default, it's set to 0. This option does not effect to the elements which user cannot type, such as radio, checkbox, select one.
// Validate fields when they have at least 5 characters
threshold: 5,


// We can indicate different threshold for
// each particular field
threshold: {
    fullName: 15,
    email: 10,
},
OptionTypeDescription
delayNumber or ObjectPending validation for a given number of seconds after user stops filling in the field. By default, it's set to 0. It's really useful if the field needs to perform validation in server side, such as the remote validator
// Validate fields after 5 seconds from the moment
// user stops filling in the field
delay: 5,


// We can indicate different delay for
// each particular field
delay: {
    fullName: 0,
    username: 5,
},

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-trigger
  • Import and use the Trigger plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { Trigger } from '@form-validation/plugin-trigger';


formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            trigger: new Trigger({
                event: ...,
                threshold: ...,
                delay: ...,
            }),
            ...
        },
    }
);

Basic example

In the following form, the Title field will be validated while user type any character (trigger="keyup"). The Summary field will be validated when user lose the focus (trigger="blur").
Trigger plugin

See also

Changelog

v2.4.0
v2.0.0
  • Add the npm package
v1.10.0
  • The plugin throws an exception when there is a field whose name is a property of String.prototype such as link
v1.6.0
  • Added a new filter named plugins-trigger-should-validate. We can use it to determine the field is validated automatically when the value is changed or not.
v1.1.0
  • Added new delay option
v1.0.0
  • First release
Transformer pluginTurnstile plugin