Validation
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.
Client-side validation
For client-side validation, a JSON schema must be stored in Form configuration dataSchema in the form of a JSON schema must be stored in
. This schema can be used to check both simple and complex conditions.
The schema is always mapped to the conditions stored in the state stored Data
Therefore, all form fields that contain data to be checked must have their values in the Data area bind.
If conditions are not met during the check, corresponding error messages are displayed in the fields that bind this data bind.
|
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
Example clientValidation. Form configuration json
Unresolved include directive in modules/forms/partials/previewCollapsed.adoc - include::example$clientValidation. xref:admin/formconfig.adoc[] json[]https://files.virtimo.net/bpc-dev/bpc-forms-renderer/support/4.2.x/index.html?formUrl=https://docs.virtimo.net/en/bpc-docs/4.2/forms/_attachments/clientValidation. Form configuration json[open preview in separate window,window=_blank]
Server-side validation
For server-side validation, the current status of the form is sent to a backend (server).
This can then check the data and send back its result.
Validation errors reported by the backend are displayed in the corresponding fields in the form.
For this form of validation to work, a
validationUrl
Request
The request that is sent to the server looks like this:
{
"action":"validate",
"originator":{}, (1)
"form":{} (2)
}| 1 | Enthält Informationen von wem oder was die Validierung angestoßen wurde. Z.B. ein Button oder ein Event |
| 2 | Enthält die aktuelle Form configuration inklusive des aktuellen Zustands der Daten |
Response
The response from the server looks for the attribute validationErrors.
This attribute must contain an array.
Each entry in the array is evaluated as a validation error.
Each error contains an error text message that is displayed in the form.
The error should also be linked to the date in the data area of the form using instancePath Data area of the state that caused the error.
{
"validationErrors": [
{
"instancePath": "/textValue", (1)
"message": "validation error"
}
]
}| 1 | Bezieht sich auf /data/textValue im state |
|
Each server response checks for |
Trigger validation
Validation can be triggered by Button or various events (see validateOnBlur and validateOnChange).
The Client-side validation is always executed when a valid schema is found Schema is stored.
Server-side validation is always executed if a valid schema has been configured validationUrl has been 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, you can hide certain components as long as the form has not been validated.
Three values are stored in state for this purpose.
{
"state": [
{
"valid": true, (1)
"validationOk" : {
"server": true, (2)
"client": true (3)
},
"validationErrors": {
"server": [], (4)
"client": [] (5)
}
}
]
}| 1 | Zeigt an, ob es Validierungsfehler gibt.
Hier wird nicht zwischen Server und Client unterschieden.
Binding per /valid bzw. !/valid |
| 2 | Zeigt an, ob vom Server Validierungsfehler gemeldet wurden.
Binding per /validationOk.server bzw. !/validationOk.server |
| 3 | Zeigt an, ob vom Client Validierungsfehler gemeldet wurden.
Binding per /validationOk.client bzw. !/validationOk.client |
| 4 | Enthält alle aktuellen Validierungsfehler vom Server. |
| 5 | Enthält alle aktuellen Validierungsfehler vom Client. |
|
If no validation has been triggered, the form is considered valid and the corresponding values in |
