React.js: How to submit form if inputs are validated?

Question

I have a basic form with two inputs: email and confirmEmail , which updates the email address and also confirms if the new email address was typed correctly.
So far validation works also fine.
Whenever email doesn't match with the confirmEmail or one of the inputs is empty, it will throw an error.
However, I want to put all this validation to the submit button , so that validation worked and errors are highlighted only once button is clicked, and update registeredEmail state if input value was valid.

Here is the code snippet and sandbox link .

import React, { useState } from "react";

function Form() {
  const [registeredEmail, setRegisteredEmail] = useState("JohnDoe@gmail.com");

  const [input, setInput] = useState({
    email: "",
    confirmEmail: ""
  });

  const [error, setError] = useState({
    email: "",
    confirmEmail: ""
  });

  const onInputChange = (e) => {
    const { name, value } = e.target;
    setInput((prev) => ({
      ...prev,
      [name]: value
    }));
    validateInput(e);
  };

  const validateInput = (e) => {
    let { name, value } = e.target;
    setError((prev) => {
      const stateObj = { ...prev, [name]: "" };

      switch (name) {
        case "email":
          if (!value) {
            stateObj[name] = "Please enter Email";
          } else if (input.confirmEmail && value !== input.confirmEmail) {
            stateObj["confirmEmail"] =
              "Email and Confirm Email does not match.";
          } else {
            stateObj["confirmEmail"] = input.confirmEmail
              ? ""
              : error.confirmEmail;
          }
          break;

        case "confirmEmail":
          if (!value) {
            stateObj[name] = "Please enter Confirm Email.";
          } else if (input.email && value !== input.email) {
            stateObj[name] = "Email and Confirm Email does not match.";
          }
          break;

        default:
          break;
      }

      return stateObj;
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    validateInput(e);
    setRegisteredEmail(input.email);
  };

  return (
    <>
      <header>{registeredEmail}</header>
      <form
        style={{
          display: "flex",
          flexDirection: "column"
        }}
      >
        <input
          type="email"
          name="email"
          placeholder="address"
          onChange={onInputChange}
          value={input.email}
        />
        {error.email && <span style={{ color: "red" }}>{error.email}</span>}

        <input
          onChange={onInputChange}
          value={input.confirmEmail}
          type="email"
          name="confirmEmail"
          placeholder="repeat address"
        />
        {error.confirmEmail && (
          <span style={{ color: "red" }}>{error.confirmEmail}</span>
        )}
      </form>
      <button onClick={handleSubmit}>speichern</button>
    </>
  );
}

export default Form;

Any help will be appreciated

Answer 1

You currently have your onInputChange handler run validateInput , which then sets the error. You may want to have it run validateInput only in your handleSubmit handler and only use onInputChange to handle state changes on keystrokes as you currently do.

Answer 2

name is an attribute and needs function getAttribute(...) to be fetched.

Try this:

var name = e.target.getAttribute('name');

UPDATE

This won't work because the real problem is that you are checking inside the event of the button that submitted. So you don't have the inputs info and values. You should check the input state and validate those (Here you can set the errors). Then you can return a boolean to decide if the user can submit or not.

Try this:

    const validateInput = () => {
    if (input.email === "") {
      setError({ ...error, email: "Please enter Email" });
      return false;
    }
    if (input.email !== input.confirmEMail) {
      setError({
        ...error,
        confirmEmail: "Email and Confirm Email does not match."
      });
      return false;
    }

    // HERE YOU CAN ADD MORE VALIDATIONS LIKE ABOVE

    return true;
   };

   const handleSubmit = (e) => {
    e.preventDefault();
    const isValid = validateInput();
    if (isValid) {
      //SubmitFunc()
    }
   };