• Success Criterion 3.3.1
  • Conformance level A

Form Reset Silently After a Failed Server-Side Validation

3.3.1 — Error Identification

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Server-side validation dropping the user on a fresh form with entries cleared and errors unstated.

Example 

// server returns HTTP 302 to /filters on any validation failure
app.post('/filters', (req, res) => {
  if (req.body.minPrice > req.body.maxPrice) {
    return res.redirect('/filters'); // form reloads empty, no error stated
  }
});

Why it matters

A shopper who typed a $40,000 minimum above a $30,000 maximum loses both numbers and sees a blank filter form with no clue what happened.

How to test

Submit invalid data via a full server round-trip: if the page reloads with a blank form and no stated errors, it fails.

How to fix

Re-render the submitted values along with a stated error, never redirect to a cleared form.

app.post('/filters', (req, res) => {
  if (req.body.minPrice > req.body.maxPrice) {
    return res.render('filters', {
      values: req.body,
      error: 'Minimum price must be lower than maximum price.'
    });
  }
});

Outcome

The shopper sees their own numbers again along with the reason, and swaps them in one edit.

Who is affected

Users with cognitive disabilities and screen reader users who can't tell the form was rejected rather than simply reset.

Learn more

Related scenarios