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("[email protected]");

  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

Alì Shadman · Accepted Answer · 2022-06-22 23:16:51Z

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()
    }
   };

ahuemmer · Accepted Answer · 2022-06-24 07:48:41Z

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.

edited Jun 24, 2022 at 7:48

ahuemmer

2,12717 gold badges30 silver badges38 bronze badges

answered Jun 22, 2022 at 22:44

Tsauf

111 bronze badge

1 Comment

FD3 Over a year ago

thanks for the answer. That makes sense, I already tried to remove ''validateInput' from 'onInputChange' function and put on 'onSubmit' function, but in this case validation doesn't work.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related