نقل التركيز إلى أول خطأ

A user submits, the page shows errors at the top, but focus stays on the button. They have no idea anything failed. 😕

On a failed submit, move focus to the first invalid field. The user lands exactly where the fix begins, no hunting required.

Find the first failing control and call focus() on it. Now both keyboard and screen reader users start at the right place.

When focus lands there, the screen reader announces the field's name, that it is invalid, and its described error all at once.

Always target the first error in document order. Jumping to a later field skips problems the user must still address.

Scrolling the error into view helps the mouse, but keyboard and screen reader users need real focus moved, not just pixels shifted.

For many errors, focus an error summary at the top first. List each problem as a link that jumps to its field.

A heading or div is not focusable by default. Add tabindex="-1" so your script can move focus to it programmatically.

Inside the summary, each item is a link to the field's id. Activating it sends focus straight to the broken input.

Only move focus in response to the user's submit, never on every keystroke. Yanking focus mid-typing is jarring and unwelcome.

After the user fixes everything and resubmits, move focus to a success message so they hear that it finally worked.

Where should focus go when a form submit fails?

On failure, move focus to the first invalid field or a focusable error summary, and to a success message once it passes. ✅