Explained solution 07: Validate a local practice form

A: a form can submit through keyboard interaction, so a button-only listener misses an important path. preventDefault cancels normal navigation; validation requires constraints and checks.

B: setCustomValidity with a nonempty message keeps the field invalid until the code clears it with an empty string. Our submit handler also refreshes the rule, so a corrected field can pass at the next submit; the input listener improves the correction experience before that point. Removing both refresh paths would leave a stale error.

C: insert this inside the existing form:

<label><input id="practice-consent" type="checkbox" required>
  I understand this is a local practice check
</label>

The existing reportValidity call checks the new constraint. No custom JavaScript is needed. Keep form.noValidate assigned after the submit listener so the handler owns the validation sequence. For a real service, server validation and privacy requirements would still be needed; this exercise implements neither a real registration nor consent collection.

Return to the exercise