# External Validation not working properly

**URL:** <https://jsonforms.discourse.group/t/external-validation-not-working-properly/2413>\
**Category:** General\
**Created:** [October 30, 2024, 1:03pm UTC](https://jsonforms.discourse.group/t/external-validation-not-working-properly/2413 "2024-10-30T13:03:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nikohart](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/nikohart/32/956_2.png) [@nikohart](https://jsonforms.discourse.group/u/nikohart)\
**Post date:** [October 30, 2024, 1:03pm UTC](https://jsonforms.discourse.group/t/external-validation-not-working-properly/2413/1 "2024-10-30T13:03:33Z")

</div>

I’m using JSONForms with custom Bootstrap classes and I’m passing custom validation errors in `additionalErrors`, as described in jsonForms documentation. The errorObj.message’s show up under the matching form elements, but the form elements themselves are not being set to “invalid” (At least they do not render as “invalid”)

Here’s my setup:

1. **Custom Styles** : I merge default styles with Bootstrap styles like this:

```auto
const bootstrapStyles = mergeStyles(defaultStyles, {
  control: {
    root: 'form-group',
    input: 'form-control',
    label: 'control-label',
    description: 'help-block',
    error: 'has-error text-danger',
    select: "dropdown-menu"
  },
  ...
});

```

1. **Example `additionalErrors` Array** :

```auto
[
  {"instancePath":"/meta/source","message":"this value must be of type URI","schemaPath":"","keyword":"","params":{}},
  {"instancePath":"/name/0/use","message":"value 'familly' not found in required ValueSet","schemaPath":"","keyword":"","params":{}},
  {"instancePath":"/link/0/type","message":"the element 'type' is mandatory but does not exist","schemaPath":"","keyword":"","params":{}}
]

    <JsonForms :data="computedPayload" :renderers="customRendererSet" :uischema="uischema" :schema="filteredSchema"
              :additionalErrors="customErrors" @change="onChange($event)" validation-mode="ValidateAndShow" :key="sessionDataIndex" />

```

**Problem** :  
The error messages appear correctly beneath the related form elements, but the form inputs themselves are not getting an “invalid” class.

I also tried this without the form-control class on the input, but still no feedback from the input.

**Question** :  
How does JSONForms set the input to “invalid,” and is there an easy way for me to apply `is-invalid` class to the input elements when errors are present? Any suggestions on how I can achieve this?

 ![Screenshot 2024-10-30 at 11.25.04](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/a/a9b4cae215bf3b546c381d7c7fb2e495d8b810ee.png)

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [October 31, 2024, 1:55pm UTC](https://jsonforms.discourse.group/t/external-validation-not-working-properly/2413/2 "2024-10-31T13:55:33Z")

</div>

Hi @nikohart ,  
It looks like you are using the vue vanilla renderers, correct?

In contrast to the **react** vanilla renderers, the **vue** vanilla renderers currently do not set any class on the `input` itself when there are validation errors. For instance, this can be seen [here](https://github.com/eclipsesource/jsonforms/blob/08bb7df186f6e1c6d19a8942a0300ebc4b9c4628/packages/vue-vanilla/src/controls/StringControlRenderer.vue#L10) for the string control.

You may open a new [feature request](https://github.com/eclipsesource/jsonforms/issues/new?assignees=&labels=&projects=&template=feature_request.yml) to also support this. This is most likely not a high priority issue for us but we are glad to accept contributions 🙂

Cheers,  
Lucas