Disable submit button until all required fields have been entered?

Is it possible for a submit button to have a disabled state until all required fields have been entered?

Make 2 submit buttons, one for disabled mode, where you click and nothing happens, another is ‘able’ mode, which when pressed the button is submitted.

Make a custom boolean variable for if the fields are filled. Example: button_ability = true if fields are filled, button_ability = false if fields aren’t filled.

Bind the ‘able’ button display to the button_ability variable, and bind the ‘disabled’ button display to (not or !)button_ability variable.

Then, the disabled button would be displayed if fields aren’t filled and hidden when fields are filled, while the ‘able’ button would be displayed when fields are filled and hidden when fields aren’t filled.

This would be my approach since I don’t know how to use the states mode in WeWeb, as of now.

are you looking to stile the button differently when is disabled or do you want to prevent form submission if a required field is missing?

If you use a button type submit inside a form container and all the input are in the form container as well and the workflow is triggered on submit (instead of on click) the form will be submitted only when all the required fields are filled. You get this automatically. Also see this post.

You can also add a disabled attribute on the button and bind the value to a formula that returns true if all the input values are not empty. You can use the same formula to bind the style of the button to add a visual clue to the disabled button.

2 Likes

@dorilama Style button differently and prevent form submission. Thank you for helping guys. I will give it a go :slight_smile: