Is there a way to disable a button (e.g. next) if all form fields are not completed?

Hey all,

So I have a 3 step form, I’d like to disable the ‘next’ button on each step unless all form fields are completed.

I have validations on each form field so the form will not submit without these being completed, but due to the above there are occassions where they will not know a field from the first step is not completed as I haven’t figured out a way of stopping them progressing to the next stage.

Any ideas?

A custom formatter on the form?
Form.isvalid()
isvalid could be a dmx formatter with JS to check all required fields inside the form and return true or false.

There is no built in Wappler solution for sure… Unless you want to put in numerous OR operators to check if each field has valid data.

Thanks for the reply @sid.

I’m no expert so try to avoid custom work where possible, but that does sound like a smart idea to tackle it.

I think what I might just end up doing is a Invalid SC response and ask the user to go back and check with an alert - as a short term fix.

If you have validations in place, the form will not submit. It will show errors on fields. So SA will not be called.
SA needs to validate the inputs still because someone might call it directly from Postman etc.

Hey Sid, maybe a miscommunication - but this works well as per the plan. It does submit, but the invalid error handler in AC works well at pointing the user to go back to the fields that they may not be able to see, as they have advanced past it. I think this will do for now - and avoids me trying to do anything custom!

Hey @mgaussie, I would have a dmx-show on the next button whose value is based on the content of your 3 inputs… so they can’t see the button till the inputs are filled in. You could also have a greyed out looking button that does nothing with the same condition in dmx-hide…

1 Like

You can use multiple conditions for the disabled attribute.

<button dmx-bind:disabled="!input1.value && !input2.value && !input3.value" > Next </button>
4 Likes

This is perfect Teo, thank you! I’ll implement this, plus the other approach mentioned above - then I have a complete solution!

Hello @mgaussie and @Teodor ,
Just tried this solution on my side and doesn’t seems to work since there are more than 1 input value to check. Any idea?
Many thanks

Has anyone managed to get the custom dmx formatter to validate all required fields? .eg: Form.isvalid()