Form Validation

HTML5 provides built-in form validation without JavaScript. Learn validation attributes and patterns.

Required Fields

The required attribute:

• Prevents submission if empty
• Works on text, select, textarea, etc.
• Shows browser validation message

Min and Max Length

• minlength - Minimum characters
• maxlength - Maximum characters

Number Constraints

Number attributes:

• min - Minimum value
• max - Maximum value
• step - Valid increment

Pattern Validation

Pattern attributes:

• pattern - Regular expression to match
• title - Message shown on invalid

Common patterns:

• [0-9]{5} - Exactly 5 digits
• [A-Za-z]+ - Only letters
• [A-Za-z0-9]+ - Letters and numbers

Email and URL Validation

type="email" and type="url" have built-in validation.

Custom Validation Messages

Validation Styling with CSS

CSS pseudo-classes:

• :valid - Field passes validation
• :invalid - Field fails validation
• :required - Field is required

Disabling Validation

• novalidate on form - Disables all validation
• formnovalidate on button - Skips validation for that submit

Exercise: Create Registration Form

Create a validated registration form:

HTML5 validation provides user feedback without JavaScript!