Validation

Fields can have one or more validators, which validate user input.

Examples

This "Age" field will output a numeric input field, and has uses the built-in integer validator:

{
    type: "input",
    inputType: "number",
    label: "Age",
    model: "user_age",
    required: true,
    hint: "Age is required & must be a whole number.",
    validator: validators.integer
}

This password field uses the built-in string validator, with custom validation messages:

{
    type: "input",
    inputType: "password",
    label: "Password",
    model: "password",
    min: 6,
    required: true,

    // String validator with custom error messages
    validator: validators.string.locale({
        fieldIsRequired: "The password is required!",
        textTooSmall: "Password must be at least {1} characters"
    })
}

This would look something like this:

Setting a validator for a field

To set the validator for a field, you add a validator: property to its schema. The value of this property can be a function or a string, or an array of functions or strings.

Use a function name

{
    type: "input",
    inputType: "text",
    label: "Name",
    model: "name",
    min: 3,
    validator: validators.string
}

This can be any function name that's accessible/in-scope.

Use a string

String values are just shortcuts for validators.<function_name>, i.e. this is equivalent to the above example:

{
    type: "input",
    inputType: "text",
    label: "Name",
    model: "name",
    min: 3,
    validator: "string"
}

i.e. validator: "string" is just shorthand for validator: validators.string.

Use an Array

If you want multiple validators for a field, you can specify an array of validators. They will be run in turn and any errors returned. The field will only validate if it passes all validators. The array can be an array of strings:

{
    type: "input",
    inputType: "text",
    label: "Name",
    model: "name",
    min: 3,
    validator: ["string", "required"]
}

or function names:

{
    type: "input",
    inputType: "text",
    label: "Name",
    model: "name",
    min: 3,
    validator: [validators.string, validators.required]
}

Built in Validators

Custom Validators

You can create custom validators, which are functions that take value, field, model parameters - and return either an array of errors, or an empty array if validation succeeds.

If your custom validators are attached to a single object, you can pass this object to Vue.use() when setting up VFG in your project. This will take each function in the object passed and attach it to the list of built-in validators. This allows you to reference your custom validators as "name strings" (convenient for JSON schemas retrieved remotely).

Example of Custom Validators being Installed

import VueFormGenerator from "vue-form-generator";
Vue.use(VueFormGenerator, {
    validators: {
        firstCustomValidator: (value, field, model) => {
            return [];
        },
        secondCustomValidator: (value, field, model) => {
            return [];
        },
        alwaysInvalid: (value, field, model) => {
            return ['I am always invalid'];
        }
    }
});

You can then reference these in your field schema by their name:

{
    type: "input",
    inputType: "text",
    model: "model",
    validator: ["firstCustomValidator", "secondCustomValidator", "alwaysInvalid"]
}

Handling Validation Events

Debounced Validation

This is useful if you want to delay the display of validation errors. You may want to do this on text fields with minimum character requirements so the user does not see "The length of text is too small!" errors as they are typing.

Last updated

Was this helpful?