Form logic - tabbing between fields with errors

Learn
1

Hi,

Has anyone got any ideas on how to handle the following situation? I’m not asking for code, just any design suggestions, which may even be “you’ll need to try a different approach entirely”.

TL;DR

I hate filling in forms where you get to the end, hit submit, nothing happens, and you have to go looking back for errors etc, or where you just get presented with a list of errors, and again have to search back to find the fields and correct them. I think these types of forms provide an awful user experience, and I’m probably not alone.

What I’m trying to implement is a form that presents any errors to the user as they move through the form, and won’t allow them to continue until each field passes its validation check, thereby guaranteeing the user has no errors to deal with at the end. So, when a user tabs out of a field, or clicks into the next field, if the field contains errors, a nice friendly error message is displayed below the field, and the field regains focus - I don’t want the user to have to select the field again.

Current Situation

The form has four fields at the moment:

Field 1: Cannot be empty, can be any String
Field 2: Can be empty, but if not it needs to match a specific format
Field 3: Can be empty, but if not it needs to match a specific format
Field 4: Cannot be empty, can be any String

For the form to ‘flow’ and make sense, the fields need to be in that order.

When each field loses focus, it is validated against the requirements above.

If the field in question fails its validation test, a Browser.Dom.focus Task is fired in order that the field regains focus, and the nice friendly error message is displayed underneath the field (using elm-animator to animate it into view).

Everything was going smoothly until I added Field 4.

The Problem

When tabbing out of Field 3 and it fails its validation check:

  1. The error message is displayed below Field 3
  2. Browser.Dom.focus is called so that Field 3 regains focus
  3. Field 4 receives focus as a result of the user tabbing out of Field 3
  4. Field 4 loses focus as the Browser.Dom.focus task in 2 passes focus back to Field 3
  5. Field 4 is validated against its contents, due to the onLoseFocus event firing
  6. Field 4 fails its validation check due to being empty and its error message is displayed
  7. Field 4 tries to regain focus
  8. A continuous battle begins between Field 3 and Field 4 for who should have focus

The issue appears to be the fact that Field 4 cannot be empty, if it could, it wouldn’t fail its validation check and pick a fight with Field 3 for who should have focus.

Has anyone done anything like this before? Or got any suggestions?

Is it an impossible dream?

Last Resort

I could remove the validation checks until the user clicks Submit and then remove the fields that pass their validation, leaving only the ones with errors, which I guess might even be nicer, not sure.

Any advice is appreciated.

Thanks

2

If you really don’t want to let the user handling the focus, maybe instead of using Dom.focus on a field failed validation, check all failed fields and focus only the first one (Field 3 here).

Basically, always focus the first field with a failed validation, not the last one that was validated.

1 Like
3

That makes sense, thanks. I’ll try that approach in the morning.

1 Like
4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.