HTML From Scratch: How to Validate an HTML Form. Lesson #19 Overcod.net

HTML From Scratch: How to Validate an HTML Form. Lesson #19

When creating a form, it’s important not only to place the fields correctly, but also to ensure that the user enters valid data. HTML provides many built-in validation tools — without JavaScript.

In this lesson, we will explore the main ways to validate an HTML form.

1. Required fields — `required`

Prevents form submission when the field is empty.

2. Email validation — `type="email"`

Checks whether the text looks like an email.

3. Number validation — `type="number"`, `min`, `max`

4. Text length — `minlength`, `maxlength`

5. URL validation — `type="url"`

6. Date validation — `type="date"` with `min` / `max`

7. Disable validation — `novalidate`, `formnovalidate`

Disable validation for the entire form:

Disable validation for one button:

8. Pattern validation — the `pattern` attribute

Allows custom validation rules using regular expressions.

Regular Expression Table for pattern

Purpose	Expression	Example	Description
Digits only	`[0-9]+`	12345	Any amount of digits
Exactly 10 digits	`\d{10}`	0671234567	Phone without country code
International phone	`\+\d{11,14}`	+380671234567	Plus + 11–14 digits
English letters only	`[A-Za-z]+`	Hello	No spaces
Letters (any language)	`\p{L}+`	Привіт	Depends on browser support
Letters + spaces	`[A-Za-z ]+`	John Doe	Spaces allowed
Email (simple)	`[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}`	test@mail.com	Basic email check
Password: letters + digits	`(?=.[0-9])(?=.[A-Za-z]).{6,}`	Abc123	At least 6 characters
Cyrillic only	`[А-Яа-яЁёЇїІіЄєҐґ]+`	Пример	Only Cyrillic symbols
Car plate (UA)	`[A-Z]{2}\d{4}[A-Z]{2}`	AA1234BB	Ukrainian plate format

Summary

We covered:

required
validation via type="email", type="url", type="number"
min, max, minlength, maxlength
disabling validation
custom validation using pattern