Auto focusing erroneous form input fields

Question

I'm auto focusing the first input field of my Sign up and Log in form before the page is displayed, but I'm not sure what to do as far as auto focusing erroneous fields after validation.

I have a couple of options in mind when it comes to multiple erroneous fields at once:

1. Auto focus the first erroneous field input and;

   • select the entire field content if any or;

   • put the text cursor at the end.

2. No auto focus.

And for scenarios with only one erroneous field:

1. Auto focus the erroneous field and;

   • select the entire field content if any or;

   • put the text cursor at the end.

2. No auto focus.

Just to be clear, I'm not forcing users to start with the auto focussed field.

Answer 1

In both the cases, I would autofocus the first field and put the cursor at the end.

Autofocusing a field gives the users an indication and a starting point to quickly begin correcting their errors while at the same time it doesn't force them to start with that specific field. It also affords you the freedom to provide some more details about the error specific to that field without cluttering the rest of the UI.

Selecting all the text may have unintended effects for somebody who doesn't realize that pressing most keys (certainly A-Z and space) would remove all that they have already entered. That might be even more drastic when it's a textarea with several paragraphs already written.

Thus, to me, it makes more sense to put the cursor at the end. It makes it one more step to delete the text and start over, but the other cases—correcting the error, adding more, or removing something from the already entered text—become just a bit easier.

Doing the same thing in both cases is also consistent.