Here for email, password and confirm password error messages are showing but for firstname, phone number and lastname the error is not showing. How can I find out what that error is?

For email when I click on that field and do not give any value, it is showing an error and the same thing for firstname.

import React from "react";

import { useState } from "react";

const emailValidator = /^(([^<>()\[\]\\.,;:\s@"] (\.[^<>()\[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/;

function Register(props) {
  const [state, setState] = useState({
    email: "",

    emailAddressError: "",

    firstName: "",
    firstNameError: ""
  });

  const handleChange = (event) => {
    const { name, value } = event.target;

    setState((prev) => ({ ...prev, [name]: value }));

    return;
  };
  const handleBlur = (event) => {
    const { name } = event.target;

    validateField(name);
    return;
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    let formFileds = ["email", "firstName"];
    let isValid = true;
    formFileds.forEach((field) => {
      isValid = validateField(field) && isValid;
    });

    if (isValid) setState((prev) => ({ ...prev, isFormSubmitted: true }));
    else setState((prev) => ({ ...prev, isFormSubmitted: false }));

    return state.isFormSubmitted;
  };
  const validateField = (name) => {
    let isValid = false;

    if (name === "email") isValid = validateemail();
    else if (name === "firstName") isValid = validatefirstName();

    return isValid;
  };

  const validatefirstName = () => {
    let firstNameError = "";
    const value = state.firstName;
    if (value.trim() === "") firstNameError = "First Name is required";
    setState((prev) => ({ ...prev, firstNameError }));
    return firstNameError === "";
  };

  const validateemail = () => {
    let emailAddressError = "";
    const value = state.email;
    if (value === "") emailAddressError = "Email Address is required";
    else if (!emailValidator.test(value))
      emailAddressError = "Email is not valid";

    setState((prev) => ({ ...prev, emailAddressError }));
    return emailAddressError === "";
  };

  return (
    <div id="__next">
      <div  style={{ height: "100vh" }}>
        <div >
          <div >
            <div >
              <div >
                <h5 >Sign Up</h5>
                <form >
                  <div >
                    <div >
                      <span style={{ color: "red" }}> *</span>
                      <label for="exampleEmail" >
                        First Name
                      </label>
                      <input
                        name="firstName"
                        value={state.firstName}
                        onChange={handleChange}
                        maxLength="20"
                        
                        placeholder="First Name"
                      />
                    </div>
                    {state.firstNameError && (
                      <div className="errorMsg" style={{ color: "red" }}>
                        {state.firstNameError}
                      </div>
                    )}
                  </div>

                  <div >
                    <span style={{ color: "red" }}> *</span>
                    <label for="exampleEmail" >
                      Email
                    </label>
                    <input
                      name="email"
                      
                      value={state.email}
                      onChange={handleChange}
                      placeholder="Email"
                      onBlur={handleBlur}
                      autoComplete="off"
                    />
                  </div>
                  {state.emailAddressError && (
                    <div className="errorMsg" style={{ color: "red" }}>
                      {state.emailAddressError}
                    </div>
                  )}

                  <div >
                    <a
                      href="/login"
                      style={{ textDecoration: "none", color: "#bd744c" }}
                    >
                      {" "}
                    </a>
                    <button
                      
                      style={{ backgroundColor: "#bd744c", color: "white" }}
                      onSubmit={handleSubmit}
                    >
                      <b>SIGN UP</b>
                    </button>
                  </div>
                </form>
                <br />
              </div>
            </div>
          </div>
        </div>
        <div ></div>
      </div>
    </div>
  );
}

// export default Register;
export default Register;

CodePudding user response：

You forgot to call onBlur={handleBlur} in firstName and I have made small changes in your code:

Now it will show errors when you click on submit.