How to disable submit button until all fields are filled in in reactjs with redux-forms. To be more specific i have a form that consists only from radio buttons. So for every question there is 5 radio buttons to choose from. And i want by submit button to be disabled until all question are answered.
Asked
Active
Viewed 2,188 times
0
-
Possible duplicate of [React.js: Disable button when input is empty](https://stackoverflow.com/questions/30187781/react-js-disable-button-when-input-is-empty) – lukas-reineke May 02 '18 at 17:41
-
Not duplicate, this is specific for redux form how to sync validate form on every change – Milos Mosovsky May 02 '18 at 17:45
-
kindly add your code snippet. – Galeel Bhasha May 02 '18 at 17:48
1 Answers
0
You need to leverage sync validation as shown here https://redux-form.com/6.6.3/examples/syncvalidation/ this will validate whole form if it's valid and pass necessary props to the component https://redux-form.com/6.6.3/docs/api/props.md/
invalid, valid
Then you can just bind disabled={invalid}
I created a sandbox to better illustrate it
Milos Mosovsky
- 2,913
- 1
- 16
- 18
-
Additionally, you can still leverage `invalid` and `valid` if you are using [field level validation](https://redux-form.com/7.4.2/examples/fieldlevelvalidation/), which adapts as the user interacts with a field (as opposed to when the form is submitted) – EricM Jul 02 '18 at 20:04