Display validation errors in JSON schema form on change/blur of form fields #4059
Conversation
This reverts commit f30bc516f8f08b29fb7b519423b31c38a532087f.
This reverts commit 8307eb3.
|
@kuosandys is there any docs I can refer to in order to work this into my code? I currently want to inccorporate this into a custom field I created. I tried to hack my way around this by just setting a boolean flag to bypass validation, but now it bypasses validation on submit :D class FirstNameField extends React.Component<FieldProps> {
hasHadFocus = false;
state = {
firstName: ''
}
constructor(props: FieldProps) {
super(props);
this.state = {
...{
firstName: ''
}
}
}
hasError() {
if (this.hasHadFocus && this.props.errorSchema.firstName !== undefined) {
if (this.props.errorSchema.firstName.__errors.length > 0) {
return true
}
}
return false
}
getError() {
if (this.hasError()) {
return this.props.errorSchema.firstName.__errors[0];
}
return ""
}
bluryChange(event) {
this.hasHadFocus = true
this.setState(
{
firstName: event.target.value,
},
() => {
this.props.onChange(this.state, this.props.errorSchema)
}
);
}
render() {
return (
<TextField
error={this.hasError()}
helperText={this.getError()}
id={this.props.uiSchema['ui:field'] + '-textfield'}
label={i18n.t('T_first_name')}
8000
variant="outlined"
value={this.state.firstName}
required={(this.props.schema.required as string[]).includes('firstName')}
onBlur={(event) => {
console.log(this.props)
this.bluryChange(event)
}}
onChange={(event) => {
this.bluryChange(event)
}} />
)
}
}
export { FirstNameFieldDeclarationType, FirstNameFieldDeclaration, FirstNameField } |
|
Hey @burks10, I found the discussion in the original react-jsonschema-form issue to be quite helpful, it’s linked in the PR comment above. Unfortunately I don’t have more docs to point you to besides the official ones, but I’ll try to explain what I did here. In my implementation, I kept track of a list of “touched”/focused on fields in the parent component. On the child component level, I simply hid the error from display if it has not been touched. This should not affect validation submission behaviour as we’re not transforming the errors in the form state. Once the submit button is clicked, all errors are displayed regardless of whether they’ve been touched. Hope this is helpful, let me know if I could clarify anything |
|
Thanks so much for the explanation @kuosandys that's definetley the approach I will take! However for some reason my Form's onBlur handler on the Form is not firing at all, am I missing something or is this a potential bug? These are the versions I am on: "@rjsf/core": "^5.8.1",
"@rjsf/mui": "^5.8.1",
"@rjsf/utils": "^5.8.1",
"@rjsf/validator-ajv8": "^5.8.1",<Form
schema={stores.fieldStore.getKeyedSchemas()}
uiSchema={stores.fieldStore.getUiSchemas()}
validator={validator}
onBlur={(id, data) => {
console.log('blur');
}}
fields={this.fieldRegistrations}
noHtml5Validate
liveValidate
>
</Form> |
What does this PR do?
This PR enables the display of form validation errors for individual fields on change / on blur.
Changes
When a field is changed or blurred, any validation errors for the field are displayed:
An accordion field in a collapsed state displays a warning icon if any of its child fields contain an error:
The warning icon is only displayed at the deepest layer:
Newly added array items will not display any applicable errors until the item is changed or blurred. For example,
arrayOfStrings No. 2displays an error after having been modified by the user, whilearrayOfStrings No. 3has not been modified by the user, and thus does not display any errors.How it works
As validating individual fields is not supported out of the box by the library (discussion in rjsf-team/react-jsonschema-form#512) , we implement this by:
Instead of transforming errors in the form state (possible by passing a function via the
transformErrorsprop to<Form />), we show/hide errors on the display side (i.e. in the<FieldTemplate />and<ErrorList />). This is because we need to maintain the capability of validating the entire form on submit.Background
giantswarm/roadmap#1181