Worked solutions 06 · A form that tells the truth

A. Trace and verify

The supplied form uses noValidate and owns custom validation. Empty participant input produces the instruction to use Sample learner and focuses that input. The exact name with seats=‘2’ produces a local confirmation saying nothing was sent or saved. Changing either field clears that confirmation. Reset restores the empty participant, seats=‘1’, no errors and no success text, then focuses the participant. Inspect the network for the form interaction itself; development-server module requests are unrelated to submission.

B. Repair stale success

Set confirmation to an empty string in the field-change handler while updating only the requested field. Clear or update that field’s error as the chosen interaction policy requires. Do not replace the whole values object with one field and accidentally discard the others. A controlled input renders from React state; a DOM-only reset can be overwritten by the next render. Reset all controlled state and feedback explicitly.

C. Transfer

Add a boolean acknowledged value and a checkbox with checked bound to it. The change handler reads currentTarget.checked. Extend validation to reject false, connect the error text using aria-describedby and mark the checkbox aria-invalid when appropriate. After participant and seats checks, focus the checkbox if it is the first remaining invalid control. Reset it to false and clear stale confirmation on change. Tests should include valid fields with false, valid fields with true, and reset after success. The confirmation must still say no real action occurred. No external submission is part of this extension.