What's the solution to form validation issues in React JSX?

Question

I'm trying to make a validation form in React but I'm having a lot of problems since I added saving user registration data.

import React, { useState } from "react";
import "./registerstyle.css";
import EyeIcon from "./EyeIcon.png";
import EyeIconHide from "./EyeIconHide.png";
import { signup } from "../../api/client";

function RegisterPage() {
  const [showPassword, setShowPassword] = useState(false);
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
  const [nameEmpty, setNameEmpty] = useState(false);
  const [confirmPasswordEmpty, setconfirmPasswordEmpty] = useState(false);
  const [emailEmpty, setEmailEmpty] = useState(false);
  const [passwordEmpty, setPasswordEmpty] = useState(false);
  const [newsletter, setNewsletter] = useState(false); // Aggiunto lo stato per la checkbox

  const [name, setName] = useState(null);
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);
  const [cpass, setCpass] = useState(null);
  const user = { name: name, email: email, password: password, cpass: cpass };



  const handleShowPassword = () => {
    setShowPassword(!showPassword);
    setPasswordVisible(!passwordVisible);
  };

  const handleShowConfirmPassword = () => {
    setShowConfirmPassword(!showConfirmPassword);
    setConfirmPasswordVisible(!confirmPasswordVisible);
  };

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

    // Verifica se i campi email e password sono vuoti
    if (!e.target.email.value) {
      setEmailEmpty(true);
      console.log("email True");
    } else {
      setEmailEmpty(false);
      console.log("email False");
    }

    if (!e.target.name.value) {
      setNameEmpty(true);
    } else {
      setNameEmpty(false);
    }

    if (!e.target.password.value) {
      setPasswordEmpty(true);
    } else {
      setPasswordEmpty(false);
    }

    if (!e.target.confirmPassword.value) {
      setconfirmPasswordEmpty(true);
    } else {
      setconfirmPasswordEmpty(false);
    }
  };

  const handleNewsletterChange = (e) => {
    setNewsletter(e.target.checked);
  }; // Funzione per gestire il cambiamento di stato della checkbox

  const passwordInputClass = passwordVisible ? "passwordVisible" : "";
  const confirmPasswordInputClass = confirmPasswordVisible ? "confirmPasswordVisible" : "";

  return (
    <div className="backgroundRegister">
      <div className="titleRegister" />
      <div className="breakRegister" />
      <div className="contlogRegister" />
      <div className="signIn" />
      <form className="formRegister" onSubmit={handleFormSubmit}>
        <label>
          {/* NAME */}
          <input type="text" name="name" placeholder="Name" onChange={(e) => { setName(e.target.value) }} required/>
        </label>
        {nameEmpty && (
          <div>
            <div className="alertCircleName" />
            <div className="FillThisName" />
            <div className="RedRectangleName" />
            <div className="nameError" />
          </div>
        )}
        <br />
        <label>
          {/* EMAIL */}
          <input type="email" name="email" placeholder="Email" onChange={(e) => { setEmail(e.target.value) }} required/>
        </label>
        {emailEmpty && (
          <div>
            <div className="alertCircleEmailRegister" />
            <div className="FillThisEmailRegister" />
            <div className="RedRectangleEmailRegister" />
            <div className="emailErrorRegister" />
          </div>
        )}
        <br />
        <label>
          {/* PASSWORD*/}
          <input
            type={showPassword ? "text" : "password"}
            name="password"
            placeholder="Password"
            className={passwordInputClass}
            onChange={(e) => { setPassword(e.target.value) }}
          />
          <img
            src={passwordVisible ? EyeIconHide : EyeIcon}
            alt="eye-icon"
            className="eyeIconRegister1"
            onClick={() => {
              handleShowPassword();
            }}
          />
        </label>
        {passwordEmpty && (
          <div>
            <div className="alertCirclePasswordRegister" />
            <div className="FillThisPasswordRegister" />
            <div className="RedRectanglePasswordRegister" />
            <div className="passwordErrorRegister" />
          </div>
        )}
        <br />
        <label>
          {/* CONFIRM PASSWORD */}
          <input
            type={showConfirmPassword ? "text" : "password"}
            name="confirmPassword"
            placeholder="Confirm Password"
            className={confirmPasswordInputClass}
            onChange={(e) => { setCpass(e.target.value) }}
          />
          <img
            src={confirmPasswordVisible ? EyeIconHide : EyeIcon}
            alt="eye-icon"
            className="eyeIconRegister2"
            onClick={() => {
              handleShowConfirmPassword();
            }}
          />
        </label>
        {confirmPasswordEmpty && (
          <div>
            <div className="alertCircleConfirmPassword" />
            <div className="FillThisConfirmPassword" />
            <div className="RedRectangleConfirmPassword" />
            <div className="confirmPasswordError" />
          </div>
        )}
        <br />
        <label> {/* NEWSLETTER */}
          <input type="checkbox" name="newsletter" checked={newsletter} onChange={handleNewsletterChange} />
        </label>
        <span className="newsletter">Send me newsletters, tricks and updates. </span>
        <br />
        <input type="submit" value="SIGN IN" className="signInButton" onClick={(e) => {
          e.preventDefault();
          signup(user);
          handleFormSubmit(e);
        }}/>
      </form>
      <div className="registerSign">
        Already have an account? <a href="" className="colorRegister">Login now</a>
      </div>
    </div>

  );
}

export default RegisterPage;

This is the registration code:

import axios from "axios";

// const client = axios.create({
//   baseURL: "http://localhost:9000", // o l'endpoint del vostro backend
//   headers: {
//     "Content-Type": "application/json",
//     //     "Authorization": "Bearer " + localStorage.getItem("token")
//   }
// });

// export default client;


async function signup(user) {
  const newUser = JSON.stringify(user);
  console.log("sono dentro la funzione");

  try {
    return await axios.post("http://localhost:3000/signup", newUser);
  } catch (err) {
    if (err.response) {
      return err.response.data;
    } else {
      console.log("Errore:", err.message);
    }
  }
};

async function login(user) {
  const newUser = JSON.stringify(user);
  console.log("sono dentro");

  try {
    return await axios.post("http://localhost:3000/login", newUser);
    //return await axios.post("http://localhost:3000/login",)
  } catch (err) {
    if (err.response) {
      return err.response.data;
    } else {
      console.log("Errore:", err.message);
    }
  }
};

async function loginOld(credentials) {
  const loginData = JSON.stringify(credentials);
  await axios.post("http://localhost:3000/login", loginData);
};

export { signup, login };

What I expected to happen, when the fields were left blank when you clicked the button, was that they would pop up from the image I created to circle the fields that were left blank. Sometimes it gives errors like:

TypeError: Cannot read properties of undefined (reading 'value')
    at handleFormSubmit (http://localhost:3000/main.7b4752724621de0f0bc6.hot-update.js:66:25)
    at onClick (http://localhost:3000/main.7b4752724621de0f0bc6.hot-update.js:387:11)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14655:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14699:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14756:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:14770:29)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:18914:7)
    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:18940:11)
    at processDispatchQueue (http://localhost:3000/static/js/bundle.js:18951:9)
    at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:18960:7)```

I'm desperate and don't really know where to put my hands.

Answer 1

Since you control the state of each input, you don't need to get the submitted value (even though the way you are trying to do it doesn't work). Instead, use controlled values ​​in the commit callback:

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

  // Verifica se i campi email e password sono vuoti
  if (!email) {
    setEmailEmpty(true);
    console.log("email True");
  } else {
    setEmailEmpty(false);
    console.log("email False");
  }

  if (!name) {
    setNameEmpty(true);
  } else {
    setNameEmpty(false);
  }

  if (!password) {
    setPasswordEmpty(true);
  } else {
    setPasswordEmpty(false);
  }

  if (!confirmPassword) {
    setconfirmPasswordEmpty(true);
  } else {
    setconfirmPasswordEmpty(false);
  }
};