I have a list of 5 questions, with a ‘Next’ button after each one. The final ‘Save’ button validates and makes sure all fields have been filled out, but I want to validate after each question, so I need the ‘Next’ buttons need to somehow handle this.
I have set all fields to “this element must not be empty”.
Does anyone have a solution for this?
Use a conditional on the ‘Next’ buttons to make them not clickable unless the required fields are filled in (or on the ‘Next’ button workflow, to only allow the workflow to run when the fields are filled in).
Ok thanks Adam, I will do that.
Since asking this question I’ve somehow messed up my ‘create a group’ form, so need to get that working again first as it’s not letting users edit their groups. I posted a separate question for this.
I am able to put a condition on the button which makes it clickable only when each form field is filled in. This works but renders the Next button ‘greyed out’ prior to the form field being filled.
I think a more desirable action would be to show the Next button as always clickable, but to highlight the form field with a red border if it’s not filled. Is there a way to do this?
The issue I am finding is that I can assign a condition to the button, but this only allows me to change the colour of the button is the form field is invalid. If I want to change the colour of the form field then I can do that (see below) but then the button remains clickable.
The main ‘Submit’ button at the end of the form does the checks and highlights the form fields if empty, so I just need to use that feature on each button step somehow. I wanted the button to have a condition which is something like When: Button1 is clicked check input form is valid but this is isn’t an option!
That’s just a styling issue - you can edit your button styles in the Style editor…
I think a more desirable action would be to show the Next button as always clickable, but to highlight the form field with a red border if it’s not filled. Is there a way to do this?
The simplest way to do this is using the built in ‘This input should not be empty’ feature.
Note that for this to work the input (or inputs) in question must be used directly in the workflow. So you’ll need to refer to the inputs’ values in the ‘Next’ button workflow in some way (just using them in the condition on the workflow works fine, so I’d suggest just doing that).
I have this option checked but that only displays the red alert when the final ‘Save’ button is clicked, not the individual ‘Next’ buttons.
The workflow has no option for “check field is filled” or similar. I can’t see how to do this?
There is no option for that in the workflow - that’s what the option ‘this input should not be empty’ on the input is for.
With that option checked, If the input’s value is used in the workflow but the input is empty, the workflow won’t run and the input will be shown with a red outline to indicate it needs to be filled in.
Of course, you could manually create the same process with your own custom states and conditionals for a more customizable UX, but it’s simpler to use the built in feature.
As I said, it only works when the input values are used in the workflow itself, so you just need to make sure your ‘Next’ button workflow references the input values in some way. You could set some custom states, or you can just use a conditional on a workflow step that references the input’s values (i.e. only when input value is not empty).
That will force the workflow to check the inputs aren’t empty, and highlight them if they are.
