Disable button until all form inputs are validated in React

Question

I have this form in my code, I want to, after checking all validation and patterns, the form button to become enabled, but I don't know how I can put this in my form, or do I need to write any other functions and which way is most clean Code?

const [disable, setDisable] = React.useState(true);

  const [staff, setStaff] = React.useState({
    username: "",
    email: "",
    phone: "",
    password: "",
  });

  const [errMessage, setErrMessage] = React.useState({
    username: "",
    email: "",
    phone: "",
    password: "",
  });

const handleChange = (e) => {
    switch (e.target.name) {
      case "email": {
        if (e.target.value.toLowerCase().match(emailValidation)) {
          setErrMessage({ ...errMessage, email: "" });
          setStaff({ ...staff, email: e.target.value });
        } else {
          setErrMessage({
            ...errMessage,
            email: "It should be a valid email address",
          });
        }
      }
      case "password": {
        if (e.target.value.length >= 12) {
          setErrMessage({ ...errMessage, password: "" });
          setStaff({ ...staff, password: e.target.value });
        } else {
          setErrMessage({
            ...errMessage,
            password: "It should be at least 12 character",
          });
        }
      }
      default:
        setStaff({
          ...staff,
          [e.target.name]: e.target.value,
        });
    }
  };

return( <button disabled={disable}>Submit</button>)

Hi Negar! I pasted an answer; please check it and let me know! — Youssouf Oumar
– Youssouf Oumar, Commented Jan 2, 2023 at 17:58
Hi. at the very first level all my errMessage state are empty strings and like when we have no error and the button at very first level is enable because errMessage length all is zero. — Negar Nasiri
– Negar Nasiri, Commented Jan 3, 2023 at 7:15
I see Negar! Check my updated answer please, and let me know. — Youssouf Oumar
– Youssouf Oumar, Commented Jan 13, 2023 at 11:23
Handling form validations in react with bare javascript code is difficult . I recommend you using libraries like Formik or react hook form . — Mehdi Faraji
– Mehdi Faraji, Commented Mar 9, 2023 at 17:10

Youssouf Oumar · Accepted Answer · 2023-01-03 09:32:39Z

1

Since you are tracking the errors in that errMessage state, you don't need an additional state for disable. It could be a simple constant you can add above and outside handleChange:

const disable =
  Object.values(errMessage).filter((v) => v).length > 0 ||
  Object.values(staff).filter((v) => v).length !== 4;

<button disabled={disable}>Submit</button>

This way, the button is disabled when there is an error message, or when one field is empty.

edited Jan 3, 2023 at 9:32

answered Jan 2, 2023 at 17:55

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable button until all form inputs are validated in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related