Validation on required field

General
1

If a user select Option A, it will show the required field.
After selecting Option A, user change his selection to Option B.
However, the the hidden required field in Option A still show up in the error logs even when user select option B for form submission.

App.js: 105 is the error log. “console.log(errors)”

  1. Onload

    image
    image1598×327 14.2 KB

  2. After user select Option A.

    image
    image1613×415 32.8 KB

  3. User change his selection to Option B

    image
    image1611×448 31 KB

How can I remove the error of required field if user select Option B?

schema.json

{
  "type": "object",
  "properties": {    
"optionSelection": {
      "title": "Select Option",
      "type": "object",
      "properties": {
        "options": {
          "type": "string",
          "enum": [
            "Option A",
            "Option B",
            "Option C"
          ]
        },
        "textField": {
          "type": "string"
        },
        "number": {
          "type": "string",
          "maxLength": 3
        }
      },
      "required": [
        "textField"
      ]
    }
 }
}

uiSchema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Group",
      "label": "Form",
      "elements": [
        {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/optionSelection/properties/options"
            },
            {
              "type": "HorizontalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/optionSelection/properties/textField"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/optionSelection/properties/number"
                }
              ],
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#properties/optionSelection/properties/options",
                  "schema": {
                    "enum": [
                      "Option A"
                    ]
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ]
}
2

Hi @newbieJson,

The validation errors are purely JSON Schema based. According to the JSON Schema the data is invalid when the textField property is missing because it’s unconditionally required.

The UI Schema rules only have a visual effect and don’t influence the validation results. This is a good thing as you often want to use the same JSON Schema in the frontend and in the backend to validate the transmitted data. If the UI Schema had any influence on that you would need tooling on the backend which is also able to modify validation results according to the UI Schema.

To solve this problem you need to adapt your JSON Schema and properly reflect when textField is required and when it’s not, e.g.

{
  "type": "object",
  "properties": {    
"optionSelection": {
      "title": "Select Option",
      "type": "object",
      "properties": {
        "options": {
          "type": "string",
          "enum": [
            "Option A",
            "Option B",
            "Option C"
          ]
        },
        "textField": {
          "type": "string"
        },
        "number": {
          "type": "string",
          "maxLength": 3
        }
      }
    }
 },
 "if": {
   "properties": { "options": { "const": "Option A" } }
 },
 "then": {
   "required": ["textField"]
 }
}
3

Thanks for the fast response! Didn’t know i could use if-else in this library

4

Just tried out this. Is working as expected. But there is one more additional error that come along with it.
How do i remove this error (must match "then"\ schema)? I tried adding the “required”: [“options”] in the if statement block still doesn’t work.

image
image1605×340 26.4 KB

5

That’s just how the AJV validation works, for if/then cases it will report the problem that the then schema doesn’t match and then it will list in detail the problem in the then case. I’m not sure whether the JSON Schema mandates a certain behavior here but the behavior of AJV is certainly not wrong.

If you don’t like the if/then errors you could filter them yourself. I’m not sure whether you can configure AJV to already do this for you. If yes, then you can create a custom AJV instance and hand this over to JSON Forms. I think this should not affect behavior as we don’t look at the if/then errors ourselves.