# Validation on required field

**URL:** <https://jsonforms.discourse.group/t/validation-on-required-field/953>\
**Category:** General\
**Created:** [August 18, 2022, 6:34am UTC](https://jsonforms.discourse.group/t/validation-on-required-field/953 "2022-08-18T06:34:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![newbieJson](https://avatars.discourse-cdn.com/v4/letter/n/4bbf92/32.png) [@newbieJson](https://jsonforms.discourse.group/u/newbieJson)\
**Post date:** [August 18, 2022, 6:34am UTC](https://jsonforms.discourse.group/t/validation-on-required-field/953/1 "2022-08-18T06:34:28Z")

</div>

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  

2. After user select Option A.  

3. User change his selection to Option B  

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

schema.json

```auto
{
  "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

```auto
{
  "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"
                    ]
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [August 18, 2022, 7:24am UTC](https://jsonforms.discourse.group/t/validation-on-required-field/953/2 "2022-08-18T07:24:48Z")

</div>

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.

```auto
{
  "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"]
 }
}

```

---

<div class="post-metadata">

**Author:** ![newbieJson](https://avatars.discourse-cdn.com/v4/letter/n/4bbf92/32.png) [@newbieJson](https://jsonforms.discourse.group/u/newbieJson)\
**Post date:** [August 18, 2022, 7:33am UTC](https://jsonforms.discourse.group/t/validation-on-required-field/953/3 "2022-08-18T07:33:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![newbieJson](https://avatars.discourse-cdn.com/v4/letter/n/4bbf92/32.png) [@newbieJson](https://jsonforms.discourse.group/u/newbieJson)\
**Post date:** [August 18, 2022, 9:15am UTC](https://jsonforms.discourse.group/t/validation-on-required-field/953/4 "2022-08-18T09:15:58Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/aeaa6d152ce8e39aa959304630ec42041ce8f859.png)

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [August 19, 2022, 7:04am UTC](https://jsonforms.discourse.group/t/validation-on-required-field/953/5 "2022-08-19T07:04:54Z")

</div>

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.