How to validate input before submitting?

Question

I want to validate input before submitting. But something went wrong, every time submit() run :((

const [value, setValue] = React.useState("");
const [error, setError] = React.useState("");
const validate = () => {
  value.length>5?setError("Some errors"):setError("");
}
const submit = () => {do something...}
...
<input onChange={e => setValue(e.target.value)} />

<Button  onClick={() => {
  validate();
  if(!error.length) submit()
}> Submit </Button>

setError is async and the new value of error will not be updated until rerender. Maybe change validate to return a string and not update the state value, you can then setError in the button onClick as well as check it in the if statement. — Jacob Smit
– Jacob Smit, Commented Oct 22, 2020 at 20:49
setError is not async. It's synchronous but the value of the original error variable does not change as it's already been assigned. It takes a new re-render (calling the component function again) to reassign the variable again. — Dylan Kerler
– Dylan Kerler, Commented Oct 22, 2020 at 20:52
Does this answer your question? Reactjs - Form input validation — Zain ul abideen
– Zain ul abideen, Commented Oct 22, 2020 at 21:20

Dylan Kerler · Accepted Answer · 2020-10-22 20:50:49Z

2

Because the error variable will only contain the new value in the next render of the component. This is due to the way useState, or rather Hooks in general work.

Instead, you'll have to return whether or not the result is valid in the validate function.

const validate = () => {
  value.length>5?setError("Some errors"):setError("");
  return value.length <= 5;
}

<Button  onClick={() => {
  const isValid = validate();
  if(isValid) submit()
}> Submit </Button>

answered Oct 22, 2020 at 20:50

Dylan Kerler

2,2072 gold badges12 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

How to validate input before submitting?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related