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”.
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.
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.
When tabbing out of Field 3 and it fails its validation check:
- The error message is displayed below Field 3
Browser.Dom.focusis called so that Field 3 regains focus
- Field 4 receives focus as a result of the user tabbing out of Field 3
- Field 4 loses focus as the
Browser.Dom.focustask in 2 passes focus back to Field 3
- Field 4 is validated against its contents, due to the
- Field 4 fails its validation check due to being empty and its error message is displayed
- Field 4 tries to regain focus
- 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?
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.