all templates
Web Basics

Form Validation

Catch mistakes before they submit, with helpful inline messages.

A sign-up form that checks each field and explains what's wrong, right where it's wrong. You'll learn form events, a little regex, and how to give people friendly, accessible feedback.

What's inside

  • Validates name, email, password and confirmation
  • Inline errors under each field, checked on blur and submit
  • A simple email pattern you can actually read
  • Accessible with aria-invalid and clear messaging
  • No dependencies, no backend needed

Quickstart

$ curl -LO https://devai.io/downloads/form-validation.zip$ unzip form-validation.zip && cd form-validation$ open index.html   # or just double-click the file

Browse the code

The full source, exactly as the zip ships it.

loading…
Download .zip
loading tree…

about this tutorial

A devai.io starter tutorial — the difference between a form and a form that helps.