Stop 02 · HTML5Topics · 4/12

Validation

In short

Users will type 'abc' in the phone field and leave the email blank. HTML can catch most of this before the form is even sent, with just a few attributes.

Built-in HTML form validation (`required`, `pattern`, `minlength`) plus the Constraint Validation API let you catch bad input before it hits the server. Validation improves user experience and data quality, but it is never a security boundary because a client can be bypassed or manipulated before a request reaches the server.

The jaadu mascot as an invigilator checks the corner of an answer sheet with a magnifying glass.

Think of it like this

The invigilator before you leave

Before you submit your answer sheet, the invigilator checks you wrote your roll number. That's browser validation. Then the college checks the answers properly later. That's server validation. You need both.

Watch it happen

Two checkpoints for one form

You

Browser

Server

Submit, PIN empty

1/6You press Save without filling the PIN code.

The big ideas

What you need to know

required

The form won't submit while this field is empty. The browser shows a message for you.

Length and range

minlength and maxlength limit text. min, max and step limit numbers and dates.

pattern for custom rules

pattern takes a regular expression, a mini language for text shapes, like exactly 6 digits for a PIN code.

Never trust only the browser

Anyone can switch off HTML checks in DevTools. The server must check everything again.

See it in code

Walk through the code

html

1<form>2  <label for="pin">PIN code</label>3  <input id="pin" name="pin" required4         pattern="[1-9][0-9]{5}"5         title="6 digits, can't start with 0" />6 7  <label for="pwd">Password</label>8  <input id="pwd" name="pwd" type="password"9         required minlength="8" />10 11  <button>Save</button>12</form>13 14<style>15  input:user-invalid { border: 2px solid crimson; }16</style>

1/3required blocks empty submits. pattern allows exactly six digits not starting with 0. title explains the rule.

:user-invalid only turns red after the user has touched the field, so the form doesn't scream at people before they start typing.

Save yourself the pain

Common mistakes

Oops

Thinking HTML validation means the data is safe.

Do this instead

It's a convenience for honest users. Always validate again on the server.

Oops

Styling with :invalid, so empty required fields are red the moment the page loads.

Do this instead

Use :user-invalid, which waits until the user has interacted with the field.

Your mission

Make a form that pushes back

~20 min

Quick check

Why must the server validate data even if the HTML form already checks it?

Go deeper

1Add `required` and `pattern` to a form and test invalid submissions. Test the result on both a successful path and an invalid or unexpected input.
2Style `:invalid` and `:valid` pseudo-classes with CSS. Validate your understanding by applying it in a small practical example.
3Learn why client-side validation must always be backed by server-side validation too.