Block bad signup input using native HTML5 form validation

Every signup form I build lets people submit a blank email field and I don't want to write a bunch of JavaScript just to stop that.

IntermediateRead 4 minDoing: 20 to 30 minutes for a two-field form, a little longer if you're wiring up more fields the same way6 steps

▶ Start

What you'll have at the end

A signup form whose email and password fields block a blank, malformed, too-short, or too-simple value, using nothing but HTML attributes, with the browser's own message and a matching on-page hint for each rule.

Before you start

You need

A signup form with a submit button and two input fields, one for an email address and one for a password, but with no label, no validation attribute, and no title text yet.

Not covered

Server-side validation of the same email and password once the request reaches your API, which still has to run no matter what the browser blocks.

Leans on

HTML5 Cheat SheetCarries the input type and validation attribute rows this recipe's markup is built from: email, required, minlength, and pattern.
Web Accessibility Cheat SheetBacks the label pairing, required marker, and error-suggestion techniques that keep the same validation reachable by assistive tech.

6 steps

Checked 25 Aug 2026

Part of the HTML5 cookbook