validate
This function makes it possible to check the entered data.
This check can take place directly in the user’s browser (client) or in a backend system.
Both validations can be used simultaneously.
If conditions are not met during validation, error messages can be displayed in the corresponding fields.
The placement of the errors can be adjusted using the attribute errorTarget attribute.
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 is used in the configuration. If this url is also not specified, no server-side validation is performed.
Client-side validation
Client-side validation is divided into two areas.
In field validation, attributes are used directly on the component for validation.
An AJV schema is used for data schema validation, which is applied to the data stored in the state
This can be used to check both simple and complex conditions.
For data schema validation, a data schema in the form of a JSON schema must be created in Form configuration dataSchema in the form of a JSON schema must be stored in
.
The client-side validation is not sufficient to ensure the integrity of the data for further processing.
As this is executed in the user’s browser, it can also be bypassed. All data should always be checked for integrity before processing in the backend.
=== Example
The following example presents some possibilities for validating various components. Explanations and other useful features can be found here.
{
"$schema": "https://forms.virtimo.net/5.1.0/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 status of the form is sent to a backend (server).
This involves sending a POST-Message is sent.
This can then check the data and send back its result.
The action validationErrors 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 can be found here.
For this form of validation to work, a Url must be specified for this form of validation to work.
== Trigger validation
Validation can be triggered by a button or various events (see validateOnBlur and validateOnChange).
Client-side validation and server-side validation is always carried out if configured.
== Validation results in state
The results of the validation are recorded in the state
This makes it possible to bind Components to these results bind.
For example, certain components can be hidden as long as the form has not been 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 | Zeigt an, ob es Validierungsfehler gibt. |
| 2 | Zeigt an, ob es Validierungsfehler durch Data-Schema Validierung gibt. |
| 3 | Zeigt an, ob es Validierungsfehler durch Feld Validierung gibt. |
| 4 | Zeigt an, ob es Validierungsfehler durch Server Validierung gibt. |
| 5 | Zeigt für jede Komponente einzeln an, ob es Validierungsfehler gibt, sofern Binding verwendet wird. |
| 6 | Zeigt für jede Komponente einzeln an, ob es Validierungsfehler durch Data-Schema Validierung gibt, sofern Binding verwendet wird. |
| 7 | Zeigt für jede Komponente einzeln an, ob es Validierungsfehler durch Feld Validierung gibt, sofern Binding verwendet wird. |
| 8 | Zeigt für jede Komponente einzeln an, ob es Validierungsfehler durch Server Validierung gibt, sofern Binding verwendet wird. |
| 9 | Enthält alle aktuellen Validierungsfehler. |
| 10 | Enthält alle aktuellen Validierungsfehler durch Data-Schema Validierung. |
| 11 | Enthält alle aktuellen Validierungsfehler durch Feld Validierung. |
| 12 | Enthält alle aktuellen Validierungsfehler durch Server Validierung. |
The values are updated at the end of a validation.
The values are therefore up-to-date if a validation has been performed.
A validation is automatically performed when a form is created.
If a type of validation is not used, this validation is not listed in the state
=== Example
{
"$schema": "https://forms.virtimo.net/5.1.0/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"components": [
{
"type": "container",
"label": "Validation Results",
"components": [
{
"type": "button",
"action": "validate",
"label": "validate"
},
{
"type": "textfield",
"required": true,
"value": "${/data/text}",
"label": "Required and no more than 3 characters."
},
{
"type": "numberfield",
"required": true,
"value": "${/data/number}",
"label": "Required and minimum value 5."
},
{
"type": "checkboxgroup",
"label": "validationOk",
"components": [
{
"type": "checkbox",
"label": "all",
"flex": 1,
"value": "${/validationOk/all}"
},
{
"type": "checkbox",
"label": "dataSchema",
"flex": 1,
"value": "${/validationOk/dataSchema}"
},
{
"type": "checkbox",
"label": "field",
"flex": 1,
"value": "${/validationOk/field}"
}
]
},
{
"type": "checkboxgroup",
"label": "validationOk - text",
"components": [
{
"type": "checkbox",
"label": "all",
"flex": 1,
"value": "${/validationOk/state/all/data/text}"
},
{
"type": "checkbox",
"label": "dataSchema",
"flex": 1,
"value": "${/validationOk/state/dataSchema/data/text}"
},
{
"type": "checkbox",
"label": "field",
"flex": 1,
"value": "${/validationOk/state/field/data/text}"
}
]
},
{
"type": "checkboxgroup",
"label": "validationOk - number",
"components": [
{
"type": "checkbox",
"label": "all",
"flex": 1,
"value": "${/validationOk/state/all/data/number}"
},
{
"type": "checkbox",
"label": "dataSchema",
"flex": 1,
"value": "${/validationOk/state/dataSchema/data/number}"
},
{
"type": "checkbox",
"label": "field",
"flex": 1,
"value": "${/validationOk/state/field/data/number}"
}
]
}
]
}
],
"dataSchema": {
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"text": {
"maxLength": 3,
"type": "string",
"errorMessage": "No more than 3 characters."
},
"number": {
"minimum": 5,
"type": "number",
"errorMessage": "Min Value: 5"
}
}
}
}
},
"configuration": {},
"state": {
"data": {
"text": "",
"number": null
}
}
}