External Validation not working properly

General
1

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:
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:
[
  {"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
Screenshot 2024-10-30 at 11.25.041702×182 10.9 KB

2

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 for the string control.

You may open a new feature request to also support this. This is most likely not a high priority issue for us but we are glad to accept contributions :slight_smile:

Cheers,
Lucas