Form submit and validation

Check fields when the form is submitted, then show what to fix.

Validate on submit, not while the user types. Show a summary alert at the top and the message beside each field. Move focus to the summary, keep what the user typed, and never disable the submit button to block submission.

LightDark

Example

Check 1 fieldEnter a monthly price.

App name

Monthly price

Enter a price, like 12.50

Save

HTML

Copy

<div class="at-alert at-alert--danger" role="alert"><strong class="at-alert__title">Check 1 field</strong>Enter a monthly price.</div>
<form class="at-stack">
  <div class="at-field"><label class="at-label" for="name">App name</label><input class="at-input" id="name" value="Rent Radar" /></div>
  <div class="at-field at-field--error"><label class="at-label" for="price">Monthly price</label><p class="at-error" id="price-error">Enter a price, like 12.50</p><input class="at-input" id="price" aria-invalid="true" aria-describedby="price-error" /></div>
  <div class="at-inline at-inline--end"><button type="submit" class="at-button at-button--primary">Save</button></div>
</form>