How to handle errors in my form fields with a single function in ReactJS?

Question

I have a form where the user needs to answer 3 questions to be able to register a new password. All fields are mandatory, and the user is unable to send the data to the server until the 3 questions are answered.

My question is how to handle input field errors with only one function? I currently perform a function for each of the fields. And this is not very good at performance levels.

For example, with just one function I can get the values entered in all input fields:

const handleChangeField = (field) => (event) => {
  const value = event?.target?.value || "";
  setData((prev) => ({ ...prev, [field]: value }));
};

Can you tell me if it is possible to create a function similar to the one above, but to handle errors? In this moment that's what I'm doing:

<TextField
  label="What is your mother's name?"
  className={classes.input}
  error={hasErrorMother}
  helperText={hasErrorMother ? "Required field*" : ""}
  value={data.motherName}
  onInput={(event) =>
    event.target.value.length > 0
      ? setHasErrorMother(false)
      : setHasErrorMother(true)
  }
  onChange={handleChangeField("motherName")}
/>

I handle errors for each of the fields within onInput.

Here's the code I put into codesandbox

Thank you very much in advance.

akram-adel · Accepted Answer · 2020-09-19 13:45:31Z

1

Here is an idea: you keep using handleChangeField but with a few modifications to also handle the error as well. But first, we need to change the state title bit:

// Remove those
// const [hasErrorMother, setHasErrorMother] = useState(false);
// const [hasErrorBorn, setHhasErrorBorn] = useState(false);
// const [hasErrorPet, setHasErrorPet] = useState(false);

// Instead have the error state this way
const [error, setError] = useState({
  motherName: false,
  birthplace: false,
  petName: false
});

...
// handleChangeField will have an extra line for error handling
const handleChangeField = (field) => (event) => {
  const value = event?.target?.value || "";
  setData((prev) => ({ ...prev, [field]: value }));
  setError((prev) => ({ ...prev, [field]: value.length === 0 })); // THIS ONE
};

And in the return statement, the TextField will change to be:

// onInput is removed, because onChange is taking care of the error
<TextField
  label="What is your mother's name?"
  className={classes.input}
  error={error.motherName}
  helperText={error.motherName? "Required field*" : ""}
  value={data.motherName}
  onChange={handleChangeField("motherName")}
/>

Now for the handleContinueAction, this will also change as follows:

...
const handleContinueAction = () => {
  const isValid =
    data.motherName.length > 0 &&
    data.birthplace.length > 0 &&
    data.petName.length > 0;

  if (isValid) {
    console.log("Ok, All data is valid, I can send this to the server now");
  } else {
    // If you want to show error for the incomplete fields
    setError({
      motherName: data.motherName.length === 0,
      birthplace: data.birthplace.length === 0,
      petName: data.petName.length === 0
    })
  }
};

...
// and git rid of this part
// const validateFields = (body) => {
//   if (body.motherName.length === 0) {
//     return setHasErrorMother(true);
//   }

//   if (body.birthplace.length === 0) {
//     return setHhasErrorBorn(true);
//   }

//   if (body.petName.length === 0) {
//     return setHasErrorPet(true);
//   }

//   return true;
};

edited Sep 19, 2020 at 13:45

answered Sep 19, 2020 at 13:18

akram-adel

1,0809 silver badges8 bronze badges

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

4 Comments

vbernal Over a year ago

Hey Akram, thank you for your help, I did what you say, but when I press the button, no one error show for the user, look my codesandbox updated: codesandbox.io/s/handle-fields-erros-7o7mb?file=/src/Form/…

akram-adel Over a year ago

When you press the button, it will only do the console.log if isValid is correct. If you want to display an error message for the fields if isValid is false then you could add an else statement simiral to the one I just put in my edited answer

vbernal Over a year ago

Perfecty!!! Not that works perfectly!!! Thank you!!!

akram-adel Over a year ago

Happy to help :)

Collectives™ on Stack Overflow

How to handle errors in my form fields with a single function in ReactJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related