# Disable submit button until all required fields have been entered?

**URL:** <https://community.weweb.io/t/disable-submit-button-until-all-required-fields-have-been-entered/956>\
**Category:** How do I?\
**Created:** [August 9, 2022, 5:50am UTC](https://community.weweb.io/t/disable-submit-button-until-all-required-fields-have-been-entered/956 "2022-08-09T05:50:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tjmcdonough](https://avatars.discourse-cdn.com/v4/letter/t/258eb7/32.png) [@tjmcdonough](https://community.weweb.io/u/tjmcdonough)\
**Post date:** [August 9, 2022, 5:50am UTC](https://community.weweb.io/t/disable-submit-button-until-all-required-fields-have-been-entered/956/1 "2022-08-09T05:50:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [August 9, 2022, 6:05am UTC](https://community.weweb.io/t/disable-submit-button-until-all-required-fields-have-been-entered/956/2 "2022-08-09T06:05:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [August 9, 2022, 7:42am UTC](https://community.weweb.io/t/disable-submit-button-until-all-required-fields-have-been-entered/956/3 "2022-08-09T07:42:11Z")

</div>

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.](https://community.weweb.io/t/missing-something-with-required-fields-in-a-form/791/2)

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.

---

<div class="post-metadata">

**Author:** ![tjmcdonough](https://avatars.discourse-cdn.com/v4/letter/t/258eb7/32.png) [@tjmcdonough](https://community.weweb.io/u/tjmcdonough)\
**Post date:** [August 9, 2022, 8:51am UTC](https://community.weweb.io/t/disable-submit-button-until-all-required-fields-have-been-entered/956/4 "2022-08-09T08:51:39Z")

</div>

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