# Select box with loaded null value not passing validation

**URL:** <https://jsonforms.discourse.group/t/select-box-with-loaded-null-value-not-passing-validation/2243>\
**Category:** General\
**Created:** [July 24, 2024, 9:53am UTC](https://jsonforms.discourse.group/t/select-box-with-loaded-null-value-not-passing-validation/2243 "2024-07-24T09:53:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![robg](https://avatars.discourse-cdn.com/v4/letter/r/a698b9/32.png) [@robg](https://jsonforms.discourse.group/u/robg)\
**Post date:** [July 24, 2024, 9:53am UTC](https://jsonforms.discourse.group/t/select-box-with-loaded-null-value-not-passing-validation/2243/1 "2024-07-24T09:53:12Z")

</div>

Hoping someone could point out any obvious mistakes here.  
This is a cut down example but I am loading a default template into the JsonForms component with the appropriate schema/uischema:

**template.json**

```auto
"vehicle_type": null

```

**schema.json**

```auto
"vehicle_type": {
  "type": ["string", "null"],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

```

**uischema.json**

```auto
{
  "type": "Control",
  "scope": "#/properties/Summary/properties/vehicle_description/properties/vehicle_type"
}

```

As requested a select is displayed on load with a blank (null) value and clicking it shows the enum options. However validation state:

> must be equal to one of the allowed values

I’m loading a complete template with nulls in place as there didn’t appear to be an out of the box function to output the json including all the fields that weren’t entered (I have about 450 fields on this form). I’m not have any problems with multi-selects, integers or strings however selects all exhibit this behaviour.

I have also tried the following any the same issue is exhibited:

**schema.json**

```auto
"vehicle_type": {
  "anyof": [{ "type": "string" }, { "type": "null" }],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

```

Any help greatly appreciated.

Rob.

---

<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:** [July 24, 2024, 10:56am UTC](https://jsonforms.discourse.group/t/select-box-with-loaded-null-value-not-passing-validation/2243/2 "2024-07-24T10:56:25Z")

</div>

Hi @robg,

JSON Schema validation is straightforward. For each keyword it checks whether there is an error.

By specifying

> [@robg](#):
>
> `"type": ["string", "null"],`

the value `null` is allowed.

However by also specifying

> [@robg](#):
>
> `"enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]`

a validation error is thrown as `null` is not in the list of allowed values.

To fix the issue, you either need to add `null` to the list of allowed values or use `undefined` instead as `undefined` values are not checked by JSON Schema (besides a potential `required` validation).

---

<div class="post-metadata">

**Author:** ![robg](https://avatars.discourse-cdn.com/v4/letter/r/a698b9/32.png) [@robg](https://jsonforms.discourse.group/u/robg)\
**Post date:** [July 24, 2024, 11:16am UTC](https://jsonforms.discourse.group/t/select-box-with-loaded-null-value-not-passing-validation/2243/3 "2024-07-24T11:16:27Z")

</div>

> [@sdirix](#):
>
> undefined

Many thanks for your prompt response @sdirix

I tried the following:

```auto
"vehicle_type": {
  "type": ["string", "null"],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5", null]
}

```

As advised it does pass validation however ideally I don’t want it to show ‘null’ in the select box. I suppose I could change the options to oneOf and generate an option with value : null and title: “” but that would result in the field minimising the question in the bordered select (MUI).  
I’m assuming if I switched from loading in a default template via data and using the AJV enabled option on the schema I would encounter the same issue?

I attempted to add undefined in multiple parts of the above but I’m afraid I’m a little lost. All failed to compile. I tried searching the docs but couldn’t see much reference to undefined:

```auto
"vehicle_type": {
  "type": ["string", "undefined"],
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

```

```auto
"vehicle_type": {
  "type": "undefined",
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5"]
}

```

```auto
"vehicle_type": {
  "type": "undefined",
  "title": "What is the vehicle type?",
  "enum": ["Option1", "Option2", "Option3", "Option4", "Option5", undefined]
}

```

---

<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:** [July 24, 2024, 1:45pm UTC](https://jsonforms.discourse.group/t/select-box-with-loaded-null-value-not-passing-validation/2243/4 "2024-07-24T13:45:26Z")

</div>

Hi @robg,

> [@robg](#):
>
> As advised it does pass validation however ideally I don’t want it to show ‘null’ in the select box.

For this you can implement a custom renderer. It can basically just reuse the existing renderer but filter the `null` option.

> [@robg](#):
>
> I attempted to add undefined in multiple parts of the above but I’m afraid I’m a little lost. All failed to compile.

The `undefined` can not be part of the JSON Schema. What I meant is that you can get rid of the `type: ['string', 'null']` array and instead just use `type: 'string'`. Then you don’t initialize your data with `null` but with `undefined` or keep it unset. The `undefined` value will be ignored by AJV and you will not get a validation error.

---

<div class="post-metadata">

**Author:** ![robg](https://avatars.discourse-cdn.com/v4/letter/r/a698b9/32.png) [@robg](https://jsonforms.discourse.group/u/robg)\
**Post date:** [July 24, 2024, 3:26pm UTC](https://jsonforms.discourse.group/t/select-box-with-loaded-null-value-not-passing-validation/2243/5 "2024-07-24T15:26:00Z")

</div>

Many thanks again @sdirix for your assistance today. I’ll take a look at both your suggestions.
