Untitled :: DOCS

Form Configuration = Validation :keywords: forms :page-aliases: forms:dev/validation.adoc

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.

Client-side validation

For client-side validation, a dataSchema in the form of a JSON schema must be defined in the . This schema can be used to check both simple and complex conditions. The schema is always applied to the stateForm Configuration stored data. Therefore, all form fields containing data to be validated must bind their values to the data section. If conditions are not met during validation, corresponding error messages are displayed in the fields that bind this data.

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

Example clientValidation.json

clientValidation.json

{
  "$schema": "https://forms.virtimo.net/4.1.x/schema.json",
  "metaData": {
    "author": "Virtimo AG",
    "name": "Client Validation Form",
    "id": "1",
    "version": 1
  },
  "components": [
    {
      "layout": "vertical",
      "components": [
        {
          "type": "textfield",
          "value": "/data/textValue"
        },
        {
          "type": "checkbox",
          "value": "/data/boolValue"
        },
        {
          "action": "validate",
          "label": "validate",
          "type": "button"
        }
      ],
      "label": "Client Validation",
      "type": "container"
    }
  ],
  "dataSchema": {
    "type": "object",
    "properties": {
      "textValue": {
        "minLength": 20,
        "type": "string",
        "errorMessage":"Der Wert muss mindestens 20 Zeichen lang sein"
      },
      "boolValue": {
        "const": true,
        "type": "boolean",
        "errorMessage":"Sie müssen die Checkbox anhaken"
      }
    }
  },
  "configuration": {
    "defaultLanguage": "de"
  },
  "state": {
    "data": {
      "textValue": "to short value",
      "boolValue": false
    }
  }
}

Open preview in a separate window

Server-side validation

For server-side validation, the current state of the form is sent to a backend (server). The server can then check the data and return 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 must be configured in the

{
  "validationErrors": [
    {
      "instancePath": "/textValue", (1)
      "message": "validation error"
    }
  ]
}

<1>.

Request

The request sent to the server looks like this:

{
  "action":"validate",
  "originator":{}, (1)
  "form":{} (2)
}

1	Contains information about who or what triggered the validation. For example, a button or an event
2	Contains the current Form Configuration, including the current state of the data

Response

The server’s response is checked for the validationErrors attribute. This attribute must contain an array. Each entry in the array is treated as a validation error. Each error contains an error message message that is displayed in the form. In addition, the error should use instancePath to point to the date in the data range of the state that caused the error. Refers to /data/textValue in the state

Every server response is checked at validationErrors. Therefore, for example, a response may be returned even for a Submit - Form Submission with validation errors.

Triggering Validation

Validation can be triggered by Button or various events (see validateOnBlur and validateOnChange). In this case, the Client-side validation is always performed if a valid schema is defined. The Server-side validation is always performed if validationUrl it has been configured.

Validation Results in the `state`

The validation results are state . This makes it possible to Components bind to these results. For example, you can hide certain components until the form is validated. Three values are maintained for this purpose in state.

{
  "state": [
    {
      "valid": true, (1)
      "validationOk" :  {
        "server": true, (2)
        "client": true (3)
      },
      "validationErrors": {
        "server": [], (4)
        "client": [] (5)
      }
    }
  ]
}

1	Indicates whether there are any validation errors. No distinction is made here between server and client. Binding via `/valid` or `!/valid`
2	Indicates whether validation errors were reported by the server. Binding via `/validationOk.server` or `!/validationOk.server`
3	Indicates whether validation errors were reported by the client. Binding via `/validationOk.client` or `!/validationOk.client`
4	Contains all current validation errors from the server.
5	Contains all current validation errors from the client.

If no validation has been triggered yet, the form is considered valid and the corresponding values in state are true.