How to enable/disable a button based on if user filled in the input fields in a form

How to enable/disable a button based on if user filled in the input fields in a form
3 answers

Hi Kokila,

There's multiple ways to go about this, here's one:

Add an attribute to your entity FormCompleted (boolean).
Update the FormCompleted attribute through an OnChange Nano-/Microflow based on whether the form is, eh, completed.
Duplicate the button on your page but set the action to ‘Do nothing’.
Add conditional visibility to hide/show the button based on FormCompleted.
You could style the non-clickable button so it looks less clickable.

Alternatively, you could add a complicted conditional visibility expression to the buttons that checks the form input fields.
That method does not require the attribute and on change flows.
I'd still prefer the first option though, because it's more explicit..

Hope this helps,



Hi Kohila,

You can enable/disable the button by adding the visibility based on input fields present in the form.

For example, you can add visibility like below for all input fields in the form


To disable the button you can use the following class in the button


Just apply this class to the button this will display the respective button as disabled to the user



Hello Kokila,

Based on your response for Jeroen’s suggestion: Check HTML snippet or Javascript snippet widget in appstore is useful for your requirement.

There are default styles available in Mendix buttons. Primary, inverse etc.

When you set the button to inverse, it will be blacked out (greyed out) and button will not be clickable.

Note down the style being applied when it is inverse style or primary style (or other style if you want). 

With the javascript snippet, you can try changing the style. 

Once again, this is only a direction. You must try this to see if it works. 

We have done some screen customization with the mentioned widget.