`validationErrors`

This function is normally used in conjunction with server-side validation In response to a validation request, the server then sends back validation errors, which are then displayed appropriately in the form.

Overview

action ("validationErrors"): Action to be executed.
payload (array<ValidationErrorPayload>): Array of validation errors.

ValidationErrorPayload

message (MultiLanguageDefinition): Error text that is displayed in the form.
instancePath (Binding): Component for which the error is to be displayed.

Example

validationErrors.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",
          "label": "set validationErrors",
          "onClick": {
            "action": "validationErrors",
            "payload": [
              {
                "instancePath": "${/data/text}",
                "message": "some validation error for text"
              },
              {
                "instancePath": "${/data/number}",
                "message": "some validation error for number"
              }
            ]
          }
        },
        {
          "type": "button",
          "label": "remove validationErrors",
          "onClick": {
            "action": "validationErrors",
            "payload": []
          }
        },
        {
          "type": "button",
          "action": "validate",
          "label": "validate, no effect on validationErrors"
        },
        {
          "type": "textfield",
          "value": "${/data/text}",
          "label": "text"
        },
        {
          "type": "numberfield",
          "value": "${/data/number}",
          "label": "number"
        },
        {
          "type": "checkboxgroup",
          "label": "validationOk",
          "components": [
            {
              "type": "checkbox",
              "label": "all",
              "flex": 1,
              "value": "${/validationOk/all}"
            },
            {
              "type": "checkbox",
              "label": "server",
              "flex": 1,
              "value": "${/validationOk/server}"
            }
          ]
        }
      ]
    }
  ],
  "configuration": {},
  "state": {
    "data": {
      "text": "",
      "number": null
    }
  }
}

Embedded preview

open preview in separate window

Keywords: