How to disable submit button in React until form is valid
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Disabling the submit button until a form is valid prevents users from submitting incomplete or invalid data. As the creator of CoreUI with over 11 years of React development experience since 2014, I’ve implemented this pattern in hundreds of production forms. The most effective solution is to create a validation function that checks all fields and use its result to control the button’s disabled state. This provides clear visual feedback and improves form usability.
Use the disabled attribute with a validation check to control submit button state.
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const isFormValid = () => {
return email.includes('@') && password.length >= 8
}
return (
<form>
<input
type='email'
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder='Email'
/>
<input
type='password'
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder='Password'
/>
<button type='submit' disabled={!isFormValid()}>
Submit
</button>
</form>
)
The isFormValid() function checks whether all form fields meet their validation criteria and returns a boolean. This function is called directly in the JSX to set the button’s disabled attribute. When the validation fails, !isFormValid() evaluates to true, disabling the button. As users type and the state updates, React re-renders and re-evaluates the validation, enabling the button once all requirements are met.
Best Practice Note
This is the same approach we use in CoreUI React forms to ensure data integrity before submission. For better performance with complex forms, consider using useMemo to memoize the validation result, preventing unnecessary recalculations on every render.
