Switching input field form validation in react

Question

Currently, in my form, the input fields get validated as soon as the user types in something. Here's the code for that-

index.js

import React from "react";
import ReactDOM from "react-dom";
import ShowError from "./ShowError";
import "./styles.css";

class App extends React.Component {
  state = {
    email: "",
    name: "",
    mobile: "",
    errors: {
      email: "",
      name: "",
      mobile: ""
    },
    nameError: false,
    emailError: false,
    mobileError: false,
    formError: false
  };

  showMsg = () => {
    if (!this.state.formError) {
      alert("Error");
    }
  };
  validateFunc = (name, value) => {
    let error = this.state.errors;
    let nameError = this.state.nameError;
    let emailError = this.state.emailError;
    let mobileError = this.state.mobileError;
    switch (name) {
      case "name":
        nameError = !/^[a-zA-Z ]+$/.test(value);
        error.name = nameError ? " is Invalid" : "";
        break;
      case "email":
        emailError = !/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i.test(value);
        error.email = emailError ? " is Invalid" : "";
        break;
      case "mobile":
        mobileError = !/^[0-9]{10}$/.test(value);
        error.mobile = mobileError ? " is Invalid" : "";
        break;
    }
    this.setState({
      errors: error,
      nameError: nameError,
      emailError: emailError,
      mobileError: mobileError
    });
  };

  handleInput = event => {
    const name = event.target.name;
    const value = event.target.value;
    this.setState(
      {
        [name]: value
      },
      this.validateFunc(name, value)
    );
  };
  handleSubmit = event => {
    event.preventDefault();
    let formError =
      this.state.nameError || this.state.emailError || this.state.mobileError;
    this.setState({
      formError: formError
    });
  };
  render() {
    return (
      <div className="App">
        <h1>Basic Form Validation</h1>
        <form className="FormStyle">
          <input
            className="FieldStyle"
            type="text"
            name="name"
            placeholder="Name"
            onChange={event => this.handleInput(event)}
          />
          <input
            className="FieldStyle"
            type="email"
            name="email"
            placeholder="Email"
            onChange={event => this.handleInput(event)}
          />
          <input
            className="FieldStyle"
            type="number"
            name="mobile"
            placeholder="Mobile"
            onChange={event => this.handleInput(event)}
          />
          <button
            className="FieldStyle"
            type="submit"
            onClick={event => this.handleSubmit(event)}
          >
            SUBMIT
          </button>
        </form>
        <ShowError error={this.state.errors} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ShowError.js

import React from "react";

const ShowError = props => {
  return Object.keys(props.error).map((field, index) => {
    if (props.error[field].length > 0) {
      return (
        <p key={index}>
          {field} {props.error[field]}
        </p>
      );
    } else {
      return "";
    }
  });
};

export default ShowError;

Expected Behaviour- What I want is, the fields should get validated as soon as the user focuses on next input field or when 'tab' key is pressed, I don't want to validate while the user is typing but when the user switches the field. How can I achieve the above behaviour? Thanks a lot!

P.S. - Would be better if I can achieve this without using libraries like redux-forms.

Answer 1

Use onBlur so the event is triggered when the user leaves the component

  onBlur={event => this.handleInput(event)}