Checking answers before they are sent

Introduction

Telling someone that they made a mistake is much more useful before they press Submit than after a slow round trip to the server. Browsers can do most common checks with a single attribute and no JavaScript at all.

How it works

Add a rule to an input, and the browser refuses to submit until the rule is met. It focuses on the first problem field and shows a message.

pattern must match the whole value, as if it began with ^ and ended with $. For example pattern="[0-9]{4}" means exactly four digits. Add a title attribute describing the format, as browsers often include it in their message. An empty optional field passes pattern: it only needs required as well if a value is compulsory.

maxlength quietly stops typing at the limit. Rules like minlength are only checked after a person has typed in the field.

Why this can never be enough. The browser is on the user's side of the wire. Anyone can open the developer tools and delete the required attribute, or skip your page entirely and send data straight to your server with another program. So browser checks are about convenience: helping honest users quickly. Server checks are about safety: they must always run, and they must not trust anything.

Telling people what you want. Say what format you expect in the label or in a line of help text, before they begin. A message like "Invalid input" helps no one. "Use 4 digits, like 1207" does.

Each input also has a state which CSS can use: :invalid matches a field that fails its rules, and :required and :optional do just what they say. A form with the novalidate attribute turns the checks off, which is useful when you write your own in JavaScript.

Syntax

<input name="pin" required pattern="[0-9]{4}" title="Exactly 4 digits">
<input name="age" type="number" min="18" max="120">

Example

Try to submit with an empty box, and then with letters.

Line by line

1. required means the PIN cannot be left empty.
2. pattern="[0-9]{4}" accepts exactly four digits, and title describes that.
3. min and max set the range, and the starting value of 17 fails it.
4. onsubmit="return false" only keeps this example on the page.
5. The CSS outlines any field failing its rules in red.

Expected result

Both boxes show a red border at first. Pressing Save shows the browser's message on the first bad field. With a PIN like 1207 and an age of 18 or more, the red borders disappear and the message stops.

In the real world

Sign-up pages use these attributes for immediate feedback, then repeat every check on the server, because attackers do not use your form. Banks and shops often add JavaScript for friendlier messages, but the rules underneath are the same ones you have just learned.

Common mistakes

• Trusting browser checks and not checking on the server.
• Writing a pattern as a partial match, forgetting that it must match the whole value.
• Assuming pattern makes a field required. An empty value passes.
• Over-strict rules, such as refusing a real name because it contains an apostrophe.

Best practices

• Explain the format before anyone gets it wrong.
• Validate only what you truly need: every rule can reject a real person.
• Always check again on the server.

Summary

required, length limits, ranges and pattern give fast feedback with no scripts. pattern matches the whole value. All of this is for convenience, and only the server can guarantee anything.

Mark lesson complete