validate
Diese Funktion ermöglicht es die eingegebenen Daten zu prüfen.
Diese Überprüfung kann direkt im Browser (Client) des Anwenders stattfinden oder erfolgt in einem Backendsystem.
Es können beide Validierungen gleichzeitig verwendet werden.
Wenn Bedingungen bei der Validierung nicht erfüllt werden, können Fehlermeldungen an den entsprechenden Feldern angezeigt werden.
Die Platzierung der Fehler kann über das Attribut errorTarget angepasst werden.
Übersicht
action("validate")-
Auszuführende Aktion.
payload(ValidateActionPayload)-
Objekt, das die anzugebene Url beinhaltet.
ValidateActionPayload
url(string)-
Url des Servers für serverseitige Validierung. Falls nicht angegeben, wird die validationUrl in der Konfiguration genutzt. Wenn diese Url ebenfalls nicht angegeben wird, wird keine serverseitige Validierung durchgeführt.
Clientseitige Validierung
Die clientseitige Validierung ist in zwei Bereiche unterteilt.
Bei der Feld Validierung werden Attribute direkt an der Komponente zur Validierung genutzt.
Für die Data-Schema Validierung wird ein AJV Schema verwendet, welches auf die im state hinterlegten Daten angewendet wird.
Damit lassen sich einfache, aber auch komplexe Bedingungen prüfen.
Für die Data-Schema Validierung muss in der Formularkonfiguration ein dataSchema in Form eines JSON Schemas hinterlegt werden.
|
Die clientseitige Validierung ist nicht ausreichend, um die Integrität der Daten für die weitere Verarbeitung abzusichern. Da diese im Browser des Anwenders ausgeführt wird, kann sie auch umgangen werden. Alle Daten sollten vor der Verarbeitung im Backend stets auf Integrität geprüft werden. |
Beispiel
Im folgenden Beispiel werden exemplarisch einige Möglichkeiten zur Validierung verschiedener Komponenten vorgestellt. Erklärungen und weitere nützliche Features sind hier zu finden.
Beispiel clientValidation.json
{
"$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": ""
}
}
}
}Serverseitige Validierung
Für die serverseitige Validierung wird der aktuelle Zustand des Formulars an ein Backend (Server) geschickt.
Hierfür wird eine POST-Nachricht gesendet.
Dieser kann dann die Daten prüfen und sein Ergebnis wieder zurücksenden.
Hierfür sollte die Aktion validationErrors verwendet werden.
Vom Backend gemeldete Validierungsfehler werden an den entsprechenden Feldern im Formular dargestellt.
Die Struktur des Nachrichtenaustauschs ist hier zu finden.
Damit diese Form der Validierung funktioniert, muss eine Url angegeben sein.
Validierung auslösen
Eine Validierung kann durch einen button oder verschiedene Events (siehe validateOnBlur und validateOnChange) ausgelöst werden.
Clientseitige Validierung und serverseitige Validierung wird immer durchgeführt, sofern konfiguriert.
Validierungsergebnisse im state
Die Ergebnisse der Validierung werden im state festgehalten.
Dadurch ist es möglich Komponenten an diese Ergebnisse zu binden.
So kann man z. B. bestimmte Komponenten ausblenden, solange das Formular nicht validiert ist.
{
"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. |
|
Die Werte werden am Ende einer Validierung aktualisiert.
Daher sind die Werte aktuell, sofern eine Validierung durchgeführt wurde.
Bei der Erstellung eines Formulars wird automatisch eine Validierung durchgeführt.
Wenn eine Art der Validierung nicht verwendet wird, wird diese Validierung im |
Beispiel
Beispiel validationResults.json
{
"$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
}
}
}