React-jsonschema-form: Validate onBlur?

[infin1t3]

Prerequisites

• [X] I have read the documentation;

Description

Is it possible to validate a field on Blur event? I would like to do that for, for example, email input.

[eddyzhang1986]

I have the same question.

[infin1t3]

@eddyzhang1986 Its not possible to do so. I recommend you to create your own implementation of jsonschema generator, its not hard and you ll have all flexibility you need.

[knilink]

A demo of OO solution for validate onBlur for the whole form.

import Form from 'react-jsonschema-form';
class BlurForm extends Form {
  constructor(props) {
    super(props);
    const superOnBlur = this.onBlur;
    this.onBlur = (...args) => {
      const { formData } = this.state;
      const { errors, errorSchema } = this.validate(formData);
      this.setState({ errors, errorSchema },()=>superOnBlur(...args));
    }
  }
}

The rest is the same, just don't enable live validation.

My experience was that the on blur is unreliable. The on blur event came after the on click which mean if users click submit in the middle of editing a field, it fnck up.

[MrOrz]

@knilink thanks for the code snippet! It works like a charm.

In my scenario I blocks form submission and force the users to fix their input before submit. Validating when blur event is fired would help users visualizing their progress in fixing inputs.

I agree that on blur is unreliable. Therefore, I would like to validate both on submit and on blur, to strike a balance between user experience and reliability.

[altaywtf]

@knilink thanks for the snippet! but it validates all fields (even the untouched ones) when blur event is triggered. Is it possible to perform onBlur validation per field?

[glasserc]

At present, react-jsonschema-form doesn't attempt to validate any user input at anything less than "the entire form" level.

[MichaelWashburnJr]

Why was this closed? This should be kept open and a prop should be added to the <Form> so that this feature can be toggled, just like liveValidate. Validating on blur is a very common case.

[lewisl9029]

I was able to implement this using a combination of liveValidate on the form and a few higher order components to manually track blurred state and show errors only once a field has been blurred on my custom widgets.

Here's what that could look like:

import {
  compose,
  mapProps,
  withStateHandlers,
} from "recompose";

const rawErrorsToErrorMessage = mapProps(
  ({ rawErrors, isBlurred, ...props }) => ({
    ...props,
    // TODO: Also need to show all errors after first submit
    errorMessage: isBlurred && rawErrors && (
      <React.Fragment>
        {rawErrors.map((error) => (
          <div>{error}</div>
        ))}
      </React.Fragment>
    ),
  }),
);

const withBlurred = withStateHandlers(
  { isBlurred: false },
  {
    onBlur: () => () => ({
      isBlurred: true,
    }),
  },
);

const transformWidgetProps = compose(
  withBlurred,
  rawErrorsToErrorMessage,
);

const widgets: any = {
  text: transformWidgetProps(TextInput),
  select: transformWidgetProps(OptionInput),
};

Hope this could be useful to others here.

UPDATE: Never mind, I later ran into a brick wall trying to show errors after the first submit attempt by wrapping a state tracking HOC around the form. For some reason, when the form gets rerendered, inputs lose their focus.

[KKS1]

Create an example for selective field level onBlur validation.
https://codesandbox.io/s/blur-validation-react-json-schema-form-txnk8
Just provide 'validateOnBlur' true, in the uiSchema for that field, and it will do the job.

Hope it helps anyone facing this issue !

[jedmonsanto]

hope this help issue: 431

[stvhanna]

@KKS1 Thank you for putting together a proof of concept! I'm trying to get your example to work with material-ui and running into a problem. Since you're extending the Form, it requires:
import Form from '@rjsf/core';

and when I try this:

import { withTheme } from '@rjsf/core';
import { Theme as MaterialUITheme } from '@rjsf/material-ui';
const Form = withTheme(MaterialUITheme);

I get an error Uncaught TypeError: Class extends value #<Object> is not a constructor or null

How do I get onblur validation to work with Material UI? Any help would be greatly appreciated.

[epicfaace]

Did it work with import Form from '@rjsf/material-ui';

[stvhanna]

@epicfaace No, same error.

[KKS1]

@stvhanna Created an end-to-end Material UI based implementation, using function based approach.
https://codesandbox.io/s/material-ui-blur-validation-react-json-schema-form-j4bms

Of-course, we can further optimize it using one time run effect, which can then call referenced Form onBlur if needed.
But this will give you ( or anyone else facing this issue) a base to start working with and make it production ready.

Hope it helps, cheers!