callback validator

Check if the input value passes a callback method

Options

Using with form field

* presents a required option. The HTML attributes are used to set the validator options via the Declarative plugin

Name HTML attribute Type Description
callback* data-fv-callback___callback Function The callback method
message data-fv-callback___message String The error message

The callback method must follow the format below:


function(input) {
    // input is an object of
    // {
    //      value: The field value,
    //      options: The callback validator options
    // }

    // Check the field validity
    return true;    // or false
}

If you want to return a dynamic message, the callback function must return an object containing the valid and message members:


function(input) {
    // input is an object of
    // {
    //      value: The field value,
    //      options: The callback validator options
    // }

    // ... Do your logic checking
    if (...) {
        return {
            valid: true,    // or false
            message: 'The error message'
        };
    }

    return {
        valid: false,       // or true
        message: 'Other error message'
    };
}

Tip

Look at the Alias plugin if you want to have multiple callbacks on the same field

Using with JavaScript module


// You might need to change the importing path
import callback from 'formvalidation/validators/callback';

const result = callback().validate({
    value: ...,
    options: {
        callback: ...,
    },
},
});
/*
result is an object of
{
    valid: true or false,
    message: The error message
}
*/

Basic Example

In the following form, user is asked to enter a correct answer of simple operation which is generated randomly.

Example: Showing dynamic message

The form below ask to enter a secure password, which must satisfies all the following conditions:

  • Must be more than 8 characters long
  • Must contain at least one upper case character
  • Must contain at least one lower case character
  • Must contain at least one digit

Example: Showing all messages

It's also possible to show all the messages initially. Then whenever the password passes a particular rule, the message associated with the rule will disappear.

We need to trigger field events to archive this. In this example, the core.validator.validated and plugins.message.displayed events are used.

Module Example

The following snippet shows how to use the callback validator with JavaScript module to check if a password is strong or weak:


// You might need to change the importing path
import callback from 'formvalidation/validators/callback';

// A very simple method to check the strength of a password
const validatePassword = function(input) {
    const value = input.value;
    if (value === '') {
        return { valid: true };
    }

    if (value.length < 8) {
        return {
            valid: false,
            message: 'Password must have at least 8 characters',
        };
    }

    if (value === value.toLowerCase()) {
        return {
            valid: false,
            message: 'Password must have at least one uppercase character',
        };
    }

    if (value === value.toUpperCase()) {
        return {
            valid: false,
            message: 'Password must have at least one lowercase character',
        };
    }

    if (value.search(/[0-9]/) < 0) {
        return {
            valid: false,
            message: 'Password must have at least one digit',
        };
    }

    return { valid: true };
}

const res1 = callback().validate({
    value: '123456',
    options: {
        callback: validatePassword,
    },
});
// res1.valid === false

const res2 = callback().validate({
    value: 'not.contains.upper',
    options: {
        callback: validatePassword,
    },
});
// res2.valid === false

const res3 = callback().validate({
    value: 'not@CONTAIN@digit',
    options: {
        callback: validatePassword,
    },
});
// res3.valid === false

const res4 = callback().validate({
    value: 'v@l1dP@@',
    options: {
        callback: validatePassword,
    },
});
// res4.valid === true

Related validators

The following validators are similar to this one and might be useful to you.

Name Description
promise Use Promise to validate value
remote Perform remote checking via Ajax request