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
about this tutorial
A devai.io starter tutorial — the difference between a form and a form that helps.
More in Web Basics
view allWeb Basics
Tip Calculator
Your first interactive page: type a bill, see the tip update live.
HTMLCSSJavaScript
View template zip + preview
Web Basics
To-Do List
Keep a list, tick things off, and have it still be there after a refresh.
HTMLCSSJavaScriptlocalStorage
View template zip + preview
Web Basics
Countdown Timer
Count down to any moment — days, hours, minutes, seconds, ticking live.
HTMLCSSJavaScriptDates
View template zip + preview