我在我的代码中需要名字，姓氏时遇到错误。它没有显示那些错误

Question

此处显示了电子邮件、密码和确认密码错误消息，但未显示名字、phone 号码和姓氏的错误消息。我怎样才能找出那个错误是什么？

对于电子邮件，当我单击该字段但未提供任何值时，它显示错误，对于名字也是如此。

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 class="no-gutters row" style={{ height: "100vh" }}>
        <div class="d-flex flex-column justify-content-center align-items-center h-100 col-12 col-md-6">
          <div class="container">
            <div class="d-flex justify-content-center row">
              <div class="col-auto col-lg-8">
                <h5 class="fw-bold mb-5">Sign Up</h5>
                <form class="w-100">
                  <div class="d-flex form-group">
                    <div class="flex-fill mr-5">
                      <span style={{ color: "red" }}> *</span>
                      <label for="exampleEmail" class="fw-bold">
                        First Name
                      </label>
                      <input
                        name="firstName"
                        value={state.firstName}
                        onChange={handleChange}
                        maxLength="20"
                        class="form-control"
                        placeholder="First Name"
                      />
                    </div>
                    {state.firstNameError && (
                      <div className="errorMsg" style={{ color: "red" }}>
                        {state.firstNameError}
                      </div>
                    )}
                  </div>

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

                  <div class="d-flex justify-content-between align-items-center mt-5">
                    <a
                      href="/login"
                      style={{ textDecoration: "none", color: "#bd744c" }}
                    >
                      {" "}
                    </a>
                    <button
                      class="btn "
                      style={{ backgroundColor: "#bd744c", color: "white" }}
                      onSubmit={handleSubmit}
                    >
                      <b>SIGN UP</b>
                    </button>
                  </div>
                </form>
                <br />
              </div>
            </div>
          </div>
        </div>
        <div class="d-none d-md-inline-block h-100 Register_backgroundImage__2j-eI col-sm-6"></div>
      </div>
    </div>
  );
}

// export default Register;
export default Register;

Answer 1

您忘记在 firstName 中调用 onBlur={handleBlur}，我对您的代码做了一些小改动：

现在点击 submit 时会显示错误。

我在我的代码中需要名字，姓氏时遇到错误。它没有显示那些错误

Im facing error in firstname ,lastname required in my code. It is not showing those errors

reactjs

react-redux