Mobile: how to set focus on validated input field

Hi,

We have implemented a form on mobile where a user have to scroll through a form to enter all fields and then save with a button in bottom placeholder. However, when one of the first fields does not pass the validation, the user does not see the validation message. 

It has to scroll up again to see why the input can't be saved.
Is there a way, just as in web, to focus on the validated input field?

I tried to set attribute 'autoFocus' based upon a certain condition, but this does not scroll up to the specific input field.

Any suggestions?

Kind regards,

Joran van Heyningen 

Solution

Hi, Joran

You can try adding a client action from componentes like this to you validation flow, identifying the first invalid input id

Or understand how they used javascript inside to scroll to the identified element, and implement it yourself.

Let me know if it works for you

Regards,

Sam

Solution

Samuel Neves wrote:

Hi, Joran

You can try adding a client action from componentes like this to you validation flow, identifying the first invalid input id

Or understand how they used javascript inside to scroll to the identified element, and implement it yourself.

Let me know if it works for you

Regards,

Sam

Hi Samuel,

I've solved it with some javascript code, which works well for input fields.

Any suggestion how to do the same for a dropdown or a webblock?
It should move up to the container where the dropdown or webblock is in, but for a Webblock there is nothing to focus on. Basically I want to move to the container which contains the webblock, dropdown or anything else.


Hi, Joran

Make sure you have named the container or dropdown or webblock. As long as it has a Name its identifier can be used as an input parameter to the jscript you're running.

Regards,

Sam

Thanks again for your quick response!

Yes I tried that as well, but it does not focus on anything then.

It seems following javascript only works for input fields:

document.getElementById($parameters.InputId).focus();