Back to Documentation
Advanced Features

Form Validation

Implement comprehensive validation rules to ensure data quality, prevent errors, and guide users to submit correct information.

8 min read
Updated December 2024
Form Validation Systemuser@invalid⚠ Please enter a valid email addressuser@example.com✓ Valid email formatValidation Types• Required Fields• Format Patterns• Min/Max Length• Custom Rules• Number Ranges• File Types

Why Validation Matters

Form validation ensures data quality, prevents submission errors, and guides users to provide correct information before submitting. Good validation improves user experience and reduces support requests.

🛡️

Data Integrity

Ensure only valid data enters your system

👤

User Guidance

Help users fix mistakes before submission

Fewer Errors

Catch issues early, reduce support load

Validation Types

1. Required Fields

Mark fields as mandatory to ensure critical information is collected:

* Required field

This field is required

Please enter your full name to continue

2. Format Validation

Ensure data matches expected patterns (email, phone, URL, etc.):

Email Validation

user@example.com
invalid@emailMissing domain extension

Phone Validation

(555) 123-4567
123-456Too short

URL Validation

https://example.com
not-a-urlInvalid URL format

3. Length Validation

Set minimum and maximum character limits:

25 / 500 characters
Minimum: 10 charactersMaximum: 500 characters
Too Short (5 chars)

Please provide at least 10 characters

Valid (25 chars)

Length meets requirements

4. Number Range Validation

Ensure numeric values fall within acceptable ranges:

Quantity Selection

Min: 1 | Max: 100 | Current: 5
❌ Value: 0

Must be at least 1

❌ Value: 150

Cannot exceed 100

5. Custom Pattern Validation (Regex)

Use regular expressions for complex validation rules:

Common Regex Patterns

ZIP Code (US)
^\d{5}(-\d{4})?$
Matches: 12345 or 12345-6789
Product Code
^[A-Z]{3}-\d{4}$
Matches: ABC-1234
Credit Card (Visa)
^4\d{15}$
Matches: 16-digit number starting with 4
Alphanumeric Only
^[a-zA-Z0-9]+$
Matches: Letters and numbers only, no spaces

6. File Upload Validation

Control allowed file types and sizes:

File Upload Restrictions

📁

Drag & drop or click to upload

PNG, JPG, PDF up to 10MB

design.png
2.3 MB - Accepted
video.mp4
File type not allowed

Validation Timing

Choose when validation occurs:

On Blur

Validate when user leaves the field

✓ Pros:
Immediate feedback
Less intrusive

On Submit

Validate when form is submitted

✓ Pros:
No interruption
All errors shown together

Real-time

Validate as user types

✓ Pros:
Instant guidance
Character counters

Error Message Best Practices

Good vs Bad Error Messages

❌ Bad
"Invalid input"

Too vague, doesn't help user fix the issue

✓ Good
"Please enter a valid email address (e.g., user@example.com)"

Specific, includes example

❌ Bad
"Error!"

No information about the problem

✓ Good
"Phone number must be 10 digits (currently: 6)"

Tells user exactly what's wrong and how to fix it

Conditional Validation

Apply validation rules based on other field values:

Example: Shipping Address

Conditional Rule:

IF "Ship to different address" is checked
THEN "Shipping Address" field becomes required

Best Practices

💡 Validation Tips

Clear Error Messages: Be specific about what went wrong and how to fix it
Inline Validation: Show errors next to the field, not just at the top
Positive Feedback: Show checkmarks for valid fields to build confidence
Format Examples: Show format in placeholder or helper text
Don't Overvalidate: Only validate what's truly necessary

Combine with Multi-Step Forms

Validate each step before allowing progression

Learn Step-by-Step Forms →