validate
This feature allows you to validate the entered data.
This validation can take place directly in the user’s browser (client) or in a backend system.
Both validation methods can be used simultaneously.
If validation conditions are not met, error messages can be displayed next to the corresponding fields.
The placement of the error messages can be customized using the errorTarget
Overview
action("validate")-
Action to be executed.
payload(ValidateActionPayload)-
Object containing the URL to be specified.
ValidateActionPayload
url(string)-
URL of the server for server-side validation. If not specified, the validationUrl in the configuration is used. If this URL is also not specified, no server-side validation is performed.
Client-Side Validation
Client-side validation is divided into two areas.
Field validation uses attributes directly on the component for validation.
For data schema validation, an AJV schema is used, which is applied to the stateForm Configuration stored data.
This allows for the verification of both simple and complex conditions.
For data schema validation, a dataSchema in the form of a JSON schema must be stored in
.
Client-side validation is not sufficient to ensure the integrity of the data for further processing.
Since it is executed in the user’s browser, it can also be bypassed. All data should always be checked for integrity before being processed on the backend.
=== Example
The following example illustrates several ways to validate different components. Explanations and other useful features can be found here.
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"components": [
{
"type": "container",
"label": "Client Validation",
"components": [
{
"type": "button",
"action": "validate",
"label": "validate"
},
{
"type": "container",
"label": "Field Validation",
"components": [
{
"type": "textfield",
"label": "Input required",
"required": true,
"value": "${/data/fieldValidation/textValue}"
}
]
},
{
"type": "container",
"label": "Data-Schema Validation",
"components": [
{
"type": "textfield",
"label": "Input at least 20 characters",
"value": "${/data/dataSchemaValidation/textValue}"
},
{
"type": "numberfield",
"label": "If a number is entered, it must be an integer with a maximum of 3.",
"value": "${/data/dataSchemaValidation/numberValue}"
},
{
"type": "textfield",
"label": "Input at least 2 characters and only lowercase letters.",
"value": "${/data/dataSchemaValidation/regexValue}"
},
{
"type": "checkbox",
"label": "Must be checked",
"value": "${/data/dataSchemaValidation/boolValue}"
},
{
"type": "textfield",
"label": "Must use e-mail format",
"value": "${/data/dataSchemaValidation/emailValue}"
}
]
}
]
}
],
"dataSchema": {
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"dataSchemaValidation": {
"type": "object",
"properties": {
"textValue": {
"minLength": 20,
"type": "string",
"errorMessage": "Input at least 20 characters"
},
"numberValue": {
"type": [
"number",
"null"
],
"allOf": [
{
"maximum": 3
},
{
"type": [
"integer",
"null"
]
}
]
},
"regexValue": {
"minLength": 2,
"type": "string",
"pattern": "^[a-z]+$",
"errorMessage": {
"type": "input required.",
"minLength": "At least 2 characters.",
"pattern": "Only lowercase letters."
}
},
"boolValue": {
"const": true,
"type": "boolean",
"errorMessage": "Must be checked."
},
"emailValue": {
"type": "string",
"format": "email",
"errorMessage": "Must be e-mail format."
}
}
}
}
}
}
},
"configuration": {},
"state": {
"data": {
"fieldValidation": {
"textValue": ""
},
"dataSchemaValidation": {
"textValue": "to short value",
"numberValue": null,
"regexValue": null,
"boolValue": false,
"emailValue": ""
}
}
}
}== Server-side validation
For server-side validation, the current state of the form is sent to a backend (server).
To do this, an POST message is sent.
The server can then check the data and return its result.
The validationErrors action should be used for this.
Validation errors reported by the backend are displayed in the corresponding fields in the form.
The structure of the message exchange can be found here.
For this form of validation to work, a URL must be specified.
== Triggering Validation
Validation can be triggered by a button or various events (see validateOnBlur and validateOnChange).
Client-side and server-side validation are always performed, provided they are configured.
== Validation Results in the state
The results of the validation are state recorded.
This makes it possible to bind Components to these results.
For example, you can hide certain components as long as the form is not validated.
{
"state": {
"validationOk" : {
"all": true, (1)
"dataSchema": true, (2)
"field": true, (3)
"server": true, (4)
"state": {
"all": {}, (5)
"dataSchema": {}, (6)
"field": {}, (7)
"server": {} (8)
}
},
"validationErrors": {
"all": [], (9)
"dataSchema": [], (10)
"field": [], (11)
"server": [] (12)
}
}
}| 1 | Indicates whether there are validation errors. |
| 2 | Indicates whether there are validation errors due to data schema validation. |
| 3 | Indicates whether there are validation errors caused by field validation. |
| 4 | Indicates whether there are validation errors caused by server validation. |
| 5 | Shows for each component individually whether there are validation errors, provided that binding is used. |
| 6 | Shows for each component individually whether there are validation errors caused by data schema validation, provided that binding is used. |
| 7 | Shows for each component individually whether there are validation errors due to field validation, provided that binding is used. |
| 8 | Shows for each component individually whether there are validation errors due to server validation, provided that binding is used. |
| 9 | Contains all current validation errors. |
| 10 | Contains all current validation errors caused by data schema validation. |
| 11 | Contains all current validation errors caused by field validation. |
| 12 | Contains all current validation errors caused by server validation. |
The values are updated at the end of a validation.
Therefore, the values are up to date provided that a validation has been performed.
A validation is performed automatically when a form is created.
If a type of validation is not used, that validation is state
xml-ph-0000@dee
.Example {filename}
Details
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"components": [
{
"type": "container",
"label": "Client Validation",
"components": [
{
"type": "button",
"action": "validate",
"label": "validate"
},
{
"type": "container",
"label": "Field Validation",
"components": [
{
"type": "textfield",
"label": "Input required",
"required": true,
"value": "${/data/fieldValidation/textValue}"
}
]
},
{
"type": "container",
"label": "Data-Schema Validation",
"components": [
{
"type": "textfield",
"label": "Input at least 20 characters",
"value": "${/data/dataSchemaValidation/textValue}"
},
{
"type": "numberfield",
"label": "If a number is entered, it must be an integer with a maximum of 3.",
"value": "${/data/dataSchemaValidation/numberValue}"
},
{
"type": "textfield",
"label": "Input at least 2 characters and only lowercase letters.",
"value": "${/data/dataSchemaValidation/regexValue}"
},
{
"type": "checkbox",
"label": "Must be checked",
"value": "${/data/dataSchemaValidation/boolValue}"
},
{
"type": "textfield",
"label": "Must use e-mail format",
"value": "${/data/dataSchemaValidation/emailValue}"
}
]
}
]
}
],
"dataSchema": {
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"dataSchemaValidation": {
"type": "object",
"properties": {
"textValue": {
"minLength": 20,
"type": "string",
"errorMessage": "Input at least 20 characters"
},
"numberValue": {
"type": [
"number",
"null"
],
"allOf": [
{
"maximum": 3
},
{
"type": [
"integer",
"null"
]
}
]
},
"regexValue": {
"minLength": 2,
"type": "string",
"pattern": "^[a-z]+$",
"errorMessage": {
"type": "input required.",
"minLength": "At least 2 characters.",
"pattern": "Only lowercase letters."
}
},
"boolValue": {
"const": true,
"type": "boolean",
"errorMessage": "Must be checked."
},
"emailValue": {
"type": "string",
"format": "email",
"errorMessage": "Must be e-mail format."
}
}
}
}
}
}
},
"configuration": {},
"state": {
"data": {
"fieldValidation": {
"textValue": ""
},
"dataSchemaValidation": {
"textValue": "to short value",
"numberValue": null,
"regexValue": null,
"boolValue": false,
"emailValue": ""
}
}
}
}