How to onBlur (mui v5 example)

If you want to validate inputs with onBlur event, you can do this following way (if you want to use required validation rule with onBlur you should add true as second parameter to validate function):

https://codesandbox.io/s/moj233r2lx

import React from "react";
import Button from "@mui/material/Button";
import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";

export default class SomeComponent extends React.Component {
  state = {
    data: { email: "" }
  };

  emailRef = React.createRef();

  handleValue = event => {
    const { data } = this.state;
    data[event.target.name] = event.target.value;
    this.setState({ data });
  };

  handleBlur = event => {
    const { name, value } = event.target;
    if (name === "email") {
      // set true as second parameter to onBlur required validation
      this.emailRef.current.validate(value);
    }
  };

  handleSubmit = () => {
    // your submit logic
  };

  render() {
    const { data } = this.state;
    return (
      <ValidatorForm
        ref={r => (this.form = r)}
        onSubmit={this.handleSubmit}
        instantValidate={false}
      >
        <TextValidator
          ref={this.emailRef}
          name="email"
          label="email"
          value={data.email}
          onBlur={this.handleBlur}
          onChange={this.handleValue}
          validators={["isEmail", "required"]}
          errorMessages={["wrong email", "this field is required"]}
        />
        <br />
        <Button onClick={() => this.form.submit()}>submit</Button>
      </ValidatorForm>
    );
  }
}