Complete example of how to validate fields in react/materialui

Currently working with the JSON form, I have scheme defined, and Im returning this form <ThemeProvider theme={gridTheme}> <JsonForms schema={schema} uischema={uischema} data={data} renderers={renderers} cells={materialCells} onChange={({ data: newData, errors }) => onChange(newData, errors) } ajv={ajv} validationMode="ValidateAndShow" /> </ThemeProvider>

I can see inside my component that there are errors, yet I can find a single example of how to update these errors. For example, If it checks if a field is required, and I type in there, it removes that error field, but if i remove the text the it doesnt update the error array.

Edit: After some research and effort it works fine with the base material ui, but when I bring in my custom textfield component renderer, it prevents the error state from showing, and still does not update the error state unless i click the X button

edit2: using the errors array length will have to suffice.

Hi @archidit,

At the moment the errors can’t really be updated manually. They are determined by AJV whenever the data changes. (In theory there is an action to update them manually, however this update will be overwritten when the next data change comes in).

The way to customize errors is to hand in a customized AJV instance which will then produce the errors you’d like to see.

I can see inside my component that there are errors, yet I can find a single example of how to update these errors. For example, If it checks if a field is required, and I type in there, it removes that error field, but if i remove the text the it doesnt update the error array.

Edit: After some research and effort it works fine with the base material ui, but when I bring in my custom textfield component renderer, it prevents the error state from showing, and still does not update the error state unless i click the X button

My guess at what’s happening here: The string attribute is marked as required so you get the required error. Then the string control is used, the data is updated and the error is no longer there as the attribute now has a value. When you now remove all text in the text control, the value will not be undefined but the empty string (''). Therefore the attribute is still there and the validation will not report an error.

So if you don’t want to support empty strings, then make sure that you update the data with undefined instead of the empty string in your custom text field when the input is empty. Then the error will also show up as expected.

Yes that was the issue there, I decided to just add requirement for minlength > 1. Thanks for the reply!