Responsive Validation Summary

A failed signup form shows a short error summary, field-level messages, and a responsive layout that keeps the summary first.

Program

A validation replay can keep the failure path visible: first the summary, then each invalid field, then the responsive layout rule that keeps the summary above both columns.

responsive_validation_summary.html

<form class="signup" aria-labelledby="signup-title" novalidate>
  <h2 id="signup-title">Create account</h2>
  <div class="validation-summary" role="alert">
    <p>Please fix 2 fields:</p>
    <a href="#email">Email needs an address.</a>
    <a href="#password">Password is too short.</a>
  </div>
  <label for="email">Email</label><input id="email" aria-invalid="true" aria-describedby="email-error">
  <p id="email-error">Enter an email address.</p>
  <label for="password">Password</label><input id="password" aria-invalid="true" aria-describedby="password-error">
  <p id="password-error">Use at least 8 characters.</p>
</form>
<style>
  .signup { display: grid; gap: 12px; max-width: 36rem; }
  @media (min-width: 42rem) { .signup { grid-template-columns: 1fr 1fr; } .validation-summary { grid-column: 1 / -1; } }
</style>

validation summary The summary gives users one visible starting point for fixing a failed form.

field state aria-invalid and aria-describedby keep each failed control tied to its message.

responsive flow The summary spans both columns so it stays first when the form widens.