How to assign activation order when multiple required inputs are empty

Hey there,

On my signup form, I have a larger parent group that has 2 smaller subgroups (1 on top and 1 on bottom), and each subgroup has 2 inputs. I have made each input a required element for my workflow, so that if the Submit button is clicked, it shows which required inputs haven’t been completed.

I would expect/hope that when this happens, the cursor would jump to/activate the first item in the larger parent group that is empty. However, the issue that I’m having is that the cursor jumps to the 1st item in the 2nd/lower subgroup first (see below). Is there a way to reorder this so that the cursor jumps to/activates the 1st empty required item in the larger parent group (in this case the ‘Email’ field instead of ‘Password’ field)?

Cursor

Hi @stashman17 ,
Welcome to the community!
You can use some conditional formatting around your confirm email input to make sure when it’s empty or invalid its border color changes to red like other inputs.
For setting focus to the first field after Submit button is clicked, you can use “set focus” from the workflow tab and use “only when” conditions.

I skipped right over that action, thanks for pointing it out. So now I’ve tried using that, but it still doesn’t seem to be working.

To provide more detail on my specific situation, I’m building a multi-step signup form. There are 4 steps, and steps 1-3 are shown/hidden using the same Next and Back buttons. On step 4, the Next button hides and the Submit button appears, so the image I included above is step 4. Based on your initial response, I tried adding a conditional element that would set the focus on the 1st input. I did this for the 1st input on each of the 4 steps. However, each time I purposefully leave all input fields blank, it still focuses on the bottom left input, no matter what step it’s on.

(I also tried adding a conditional formatting to the confirm email input and it’s still not working properly either).

Would you know a workaround? Or am I potentially missing something? All elements in the element tree appear in the correct order I’m wanting…

Try this:
For every single Next button on each step add an event in the workflow tab to create a conditional formatting to set focus to the first invalid or blank field on that step. Then add another action after every “set focus” action to terminate the workflow. For the last step, do the same thing for the Submit button.



I tried doing this too, but it still wouldn’t work. I think it was because I was using 2 subgroups within the larger parent group. It seemed to keep defaulting to set the focus on the first input in the lowest group (bottom subgroup) even though I tried setting the focus to the first input in the top subgroup. I ended up just deleting those 2 smaller subgroups and put all 4 inputs in the same larger parent group. Once I did this, it fixed my issue.

I appreciate the pointers, because I will almost certainly need to be aware of these options as I continue to develop the app!

This topic was automatically closed after 70 days. New replies are no longer allowed.