- Success Criterion 3.2.2
- Conformance level A
- W3C reference F36
Form That Submits Itself the Moment the Last Field Is Filled
3.2.2 — On Input
Scenario
Setting
A customer-support live-chat widget
What’s wrong
The form submits itself automatically the moment the last field is filled — the user never chose to submit and may not be ready.
Example
messageInput.addEventListener('input', () => {
if (messageInput.value.length > 0 && emailInput.value && nameInput.value) {
chatForm.submit();
}
}); Why it matters
The instant all three fields have any content, the pre-chat form submits itself, so a user still editing their message gets sent to an agent mid-sentence.
How to test
Fill in every field except the last one, then fill the last field and stop (don't press submit): if the form submits automatically, it fails.
How to fix
Remove the auto-submit input listener and require the submit button. Filling every field is not the same as choosing to submit; always require an explicit submit action.
<button type="submit">Start Chat</button> Outcome
A user finishes typing their question fully before the chat request goes to an agent.
Who is affected
Users who type slowly or use assistive input methods like voice dictation lose the chance to finish or correct their message before it's sent.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Selecting an Option That Opens a New Window With No Warning
- Dropdown That Navigates to a New Page on Selection
- Checking a Box That Reloads the Page and Loses Entries
- Country Selector That Re-Renders the Form and Drops Focus
- Search Box That Auto-Navigates Once Enough Characters Are Typed
- Radio Selection That Auto-Advances a Multi-Step Wizard