Hey, I have been creating a bunch of semi-complicated forms recently. I want the submit button to be disabled (and styled accordingly) if not all fields are filled in.
I am using the ‘required’ field on my inputs to ensure the form is not being triggered when pressing, but I would also like to set the opacity of the button down as well.
Is there an easier way to ‘hook’ into the required logic that the form control uses behind the scenes or do I need to create a super long formula that checks if all my fields are filled in like so:
One implementation option would be to create a global formula that checks if its values are empty and returns bool, say isEmpty(). If you write it such that it can take an array as input, and can handle different types of values, then you can just use isEmpty()on your buttons, to which you pass all the field values you want to validate in an array.
You could also create different formulas for different types of values. Maybe less complex to implement but also a bit more repetition then.
I find it is good practice to have the least amount of formulas directly in a component’s logic, and rather use global formulas that you reference in components. Or at least when you have cases that are so universal such as checking if fields are empty.
That being said, there almost certainly is a way to hook onto that existing logic, but it’s not frontend in the editor and also not documented.
There should be a way for you to find out by inspecting the page in dev tools. You can look for event listeners, class names, or any other attributes related to the “required” fields and the submit button state. This may give you insights into how WeWeb handles the “required” feature internally and help you find a way to hook onto it.
Thank you, yes this does indeed work, but if I have a form with 30+ inputs, some of them having specific rules (min.2 but less than 5 or similar) then it gets a bit hectic
