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:1
{
2
type: "input",
3
inputType: "number",
4
label: "Age",
5
model: "user_age",
6
required: true,
7
hint: "Age is required & must be a whole number.",
8
validator: validators.integer
9
}
Copied!
This password field uses the built-in
string validator, with custom validation messages:1
{
2
type: "input",
3
inputType: "password",
4
label: "Password",
5
model: "password",
6
min: 6,
7
required: true,
8
​
9
// String validator with custom error messages
10
validator: validators.string.locale({
11
fieldIsRequired: "The password is required!",
12
textTooSmall: "Password must be at least {1} characters"
13
})
14
}
Copied!
This would look something like this:
Password field with a custom validation message
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
1
{
2
type: "input",
3
inputType: "text",
4
label: "Name",
5
model: "name",
6
min: 3,
7
validator: validators.string
8
}
Copied!
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:1
{
2
type: "input",
3
inputType: "text",
4
label: "Name",
5
model: "name",
6
min: 3,
7
validator: "string"
8
}
Copied!
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:
1
{
2
type: "input",
3
inputType: "text",
4
label: "Name",
5
model: "name",
6
min: 3,
7
validator: ["string", "required"]
8
}
Copied!
or function names:
1
{
2
type: "input",
3
inputType: "text",
4
label: "Name",
5
model: "name",
6
min: 3,
7
validator: [validators.string, validators.required]
8
}
Copied!
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
1
import VueFormGenerator from "vue-form-generator";
2
Vue.use(VueFormGenerator, {
3
validators: {
4
firstCustomValidator: (value, field, model) => {
5
return [];
6
},
7
secondCustomValidator: (value, field, model) => {
8
return [];
9
},
10
alwaysInvalid: (value, field, model) => {
11
return ['I am always invalid'];
12
}
13
}
14
});
Copied!
You can then reference these in your field schema by their name:
1
{
2
type: "input",
3
inputType: "text",
4
model: "model",
5
validator: ["firstCustomValidator", "secondCustomValidator", "alwaysInvalid"]
6
}
Copied!
Handling Validation Events
The
vue-form-generator component emits a validated event, if validation is executed. The event parameters are: isValid: boolean, errors: Array. Full details of handling validation events.Debounced Validation
If you set the
validateDebounceTime option to a positive integer, then all validation will be delayed by this amount of time in milliseconds.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.
NOTE: This option affects all fields within the schema, if you would like to debounce only a specific field or fields, you can use the
validateDebounceTime field property instead.Last modified 3yr ago