Concept questionMedium~7 min

Interview question

An API returns validation errors after submitting a form. How would you show those errors in the frontend cleanly?

Map API validation errors to the form UI

Explains field-level and form-level error mapping from API responses into a usable frontend form experience.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I would agree on an error response that separates field errors from general errors. Field errors use stable field keys that match the form model, and general errors appear near the submit action or in a summary. After a failed submit, the UI keeps the user's input, marks invalid fields, focuses the first meaningful error, and lets the user resubmit after corrections. Unknown errors fall back to a safe message.

Full answer below

Practice focus

Error contracts, field mapping, form summaries, nested fields, localization, focus management, and retry behavior.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
A form can have solid backend validation and still feel broken if the frontend cannot explain the error. This drill checks the practical handoff between API error shape and user-facing recovery.
I would agree on an error response that separates field errors from general errors. Field errors use stable field keys that match the form model, and general errors appear near the submit action or in a summary. After a failed submit, the UI keeps the user's input, marks invalid fields, focuses the first meaningful error, and lets the user resubmit after corrections. Unknown errors fall back to a safe message.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would handle nested and repeated fields deliberately. For arrays or complex inputs, the API needs paths that the UI can map back to the right row or control. Error codes are useful because display text can be localized or adjusted without changing server behavior. I would also preserve server error details across rerenders and clear them when the user edits the affected field, while keeping global errors until the next submit.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would design for compatibility and diagnosis. The frontend can tolerate extra error fields it does not understand, and the API can include correlation ids for support. I would avoid leaking internal exception details while still giving enough context for recovery. Metrics around validation codes can show confusing copy, outdated clients, or bot traffic. Accessibility matters: errors need labels, focus order, screen-reader announcements, and no visual-only state. I would include regression coverage for the highest-risk forms so a backend validation change cannot silently turn into unusable frontend feedback.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Parsing arbitrary exception messages in the frontend.
Dropping user input after a failed submit.
Showing all errors as a single generic toast.
Using field labels as API error keys.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot describe a stable error response shape.
No plan for nested or repeated fields.
Ignores focus and accessibility behavior.
Leverages internal exception text as user-facing copy.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How would array item errors be represented?
When would you show a toast instead of field errors?
How would localization change the error contract?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

2 linked

Go deeper

Practice the next layer of the same subject.

Error Handling Strategy ProblemDetails vs Custom Errors

Opening drill

Concept questionMedium~7 min

Interview question

An API returns validation errors after submitting a form. How would you show those errors in the frontend cleanly?

Map API validation errors to the form UI

Explains field-level and form-level error mapping from API responses into a usable frontend form experience.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Error contracts, field mapping, form summaries, nested fields, localization, focus management, and retry behavior.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
A form can have solid backend validation and still feel broken if the frontend cannot explain the error. This drill checks the practical handoff between API error shape and user-facing recovery.
I would agree on an error response that separates field errors from general errors. Field errors use stable field keys that match the form model, and general errors appear near the submit action or in a summary. After a failed submit, the UI keeps the user's input, marks invalid fields, focuses the first meaningful error, and lets the user resubmit after corrections. Unknown errors fall back to a safe message.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would handle nested and repeated fields deliberately. For arrays or complex inputs, the API needs paths that the UI can map back to the right row or control. Error codes are useful because display text can be localized or adjusted without changing server behavior. I would also preserve server error details across rerenders and clear them when the user edits the affected field, while keeping global errors until the next submit.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would design for compatibility and diagnosis. The frontend can tolerate extra error fields it does not understand, and the API can include correlation ids for support. I would avoid leaking internal exception details while still giving enough context for recovery. Metrics around validation codes can show confusing copy, outdated clients, or bot traffic. Accessibility matters: errors need labels, focus order, screen-reader announcements, and no visual-only state. I would include regression coverage for the highest-risk forms so a backend validation change cannot silently turn into unusable frontend feedback.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Parsing arbitrary exception messages in the frontend.
Dropping user input after a failed submit.
Showing all errors as a single generic toast.
Using field labels as API error keys.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot describe a stable error response shape.
No plan for nested or repeated fields.
Ignores focus and accessibility behavior.
Leverages internal exception text as user-facing copy.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How would array item errors be represented?
When would you show a toast instead of field errors?
How would localization change the error contract?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

2 linked

Go deeper

Practice the next layer of the same subject.

Error Handling Strategy ProblemDetails vs Custom Errors

An API returns validation errors after submitting a form. How would you show those errors in the frontend cleanly?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

An API returns validation errors after submitting a form. How would you show those errors in the frontend cleanly?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper