How to implement a logic any validation is triggered, the button is disable.

Question

There are many components in my interface, and each component has their own validations. I want to implement a require like if any validation is triggered, the submit button should be disable. Is there any easy way I can achieve that? Or I can only write all the validations again in disable.

Yashwanth Akula · Accepted Answer

Hi edwardc8281 You can use the "validate" parameter in the submit button, so if any validation is triggered in any of the components, the submit button will not submit the form. But if you need to disable the submit button, I suggest creating a rule for validations, keeping every component validation in that expression rule, and using the rule in components and also in the submit button at the disable parameter. Whenever any validation occurs, make disable true. Hope this helps! Looking forward to seeing other approaches as well.

Shubham Aware · Answer

Create one expression rule with all validations that returns a dictionary/map of errors. Use it in both component validations (accessing specific fields) and button disabled (checking if any errors exist). This gives you single source of truth for all validation logic - no duplication, easy maintenance.

Stefan Helzle · Answer

I do not allow disabling submit buttons in any of my projects. IMHO this just leads to a bad or clunky UX.

How to implement a logic any validation is triggered, the button is disable.

Top Replies