Form Validation

Bootstrap Validation

Default Bootstrap validation with .needs-validation

Looks good!
Please enter your first name.
Looks good!
Please enter your last name.
@
Please choose a username.
Please enter a valid email address.
You must agree before submitting.
Server-Side Validation Style

Pre-applied validation states (no JavaScript required)

Looks good!
Looks good!
@
Username is already taken.
Please enter a valid email address.
You must agree before submitting.
Validation with Tooltips
Tooltip Feedback

Validation messages displayed as tooltips using .valid-tooltip and .invalid-tooltip

Looks good!
Please enter your first name.
Looks good!
Please enter your last name.
@
Please choose a unique username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip code.
HTML5 Built-in Validation
HTML5 Input Types

Browser-native validation using HTML5 attributes

Must be a valid email format.
Please enter a valid email address.
Must include http:// or https://
Please enter a valid URL.
Format: 123-456-7890
Please enter a valid phone number.
Must be between 18 and 120.
Please enter a valid age (18-120).
Pattern Validation

Custom patterns using the pattern attribute

5 digits, optionally followed by -4 digits.
Please enter a valid US zip code.
Format: XXX-XX-XXXX
Please enter a valid SSN format.
16 digits, spaces optional.
Please enter a valid credit card number.
Only letters (no numbers or special characters).
Please enter letters only.
Length Validation
Min/Max Length

Using minlength and maxlength attributes

Must be 3-20 characters long.
Username must be 3-20 characters.
Minimum 8 characters.
Password must be at least 8 characters.
Maximum 500 characters.
0/500
Exactly 4 digits.
PIN must be exactly 4 digits.
Range Validation

Using min, max, and step for numbers

Between 1 and 100.
Quantity must be between 1 and 100.
$0 - $10,000, increments of $0.01.
Please enter a valid price.
0-100%, increments of 5%.
Discount must be 0-100%.
Must be a future date.
Please select a valid future date.
Password Validation
Password Strength

Visual password strength indicator

Enter a password 0 characters
  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number
  • One special character (!@#$%^&*)
Passwords do not match.
Passwords match!
Password Match Validation

Real-time password confirmation

Password must be at least 8 characters.
Passwords do not match.
Passwords match!
Custom Validation Messages
Inline Error Messages

Custom styled validation feedback

Please enter a valid email address.
Password must be at least 8 characters long.
Please select your country.
Alert-Style Errors

Form errors displayed as an alert summary

Checkbox & Radio Validation
Required Checkbox

At least one checkbox must be selected

Please select at least one interest.
You must agree to the terms to continue.
Required Radio Selection

One option must be selected

Please select a plan.
Please select a payment method.
File Upload Validation
File Type Validation

Restrict file uploads by type

Allowed: JPG, PNG, GIF
Please upload a valid image file.
Allowed: PDF, DOC, DOCX
Please upload a valid document.
Allowed: CSV, XLS, XLSX (optional)
File Size Validation

JavaScript-based file size checking

Maximum file size: 2MB
File size exceeds 2MB limit.
Maximum 5 files, 1MB each
Real-time Validation
Live Validation Form

Validates as you type with immediate feedback

3-20 characters, letters and numbers only
We'll never share your email
US phone format
Include https://
Minimum 10 characters
0/500