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:




    


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

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

Option Type Description
event String or Object

Define the events. 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,
},
threshold Number or Object

Only perform the validation if the field value exceed this number of characters. By default, it's set to 0.


// 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,
},

This option does not effect to the elements which user cannot type, such as radio, checkbox, select one.

delay Number or Object

Pending 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,
},

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").

Using threshold option

In the following form, the Full name and Phone number fields will be validated when they have at least 10 and 5 characters, respectively. Again, this option doesn't effect on radio, checkbox, select elements.

Using delay option

In the following form, the username field validations will be postponed for 3 seconds after user stops filling in the field. Other field will be validated instantly right after each key stroke.

For testing purpose, the demo always answers that the username is already taken no matter what you input.

Changelog

  • v1.1.0: Added new delay option
  • v1.0.0: First release