Intermediate5 min

Validation Rules

Validation ensures users submit correct, complete data. Set rules to check input before submission.

Built-in Validation

Required Fields

Mark fields that must be filled:

  1. Select the field
  2. Toggle Required on
  3. Optionally customize error message

Error shown: "This field is required"

Type Validation

Automatic for typed fields:

  • Email - Valid email format
  • URL - Valid web address
  • Phone - Valid phone format
  • Number - Numeric only

Text Validation

Length Limits

Set character constraints:

| Setting | Description | |---------|-------------| | Min Length | Minimum characters required | | Max Length | Maximum characters allowed |

Example: Password must be 8-128 characters

Pattern Matching

Use regular expressions:

Common patterns:

Alphanumeric: ^[a-zA-Z0-9]+$
No spaces: ^\S+$
Starts with letter: ^[a-zA-Z]
US Zip: ^\d{5}(-\d{4})?$

Word Count

For textareas:

  • Min words
  • Max words

Number Validation

Range

Set acceptable values:

  • Min value
  • Max value
  • Between

Step

Enforce increments:

  • Step: 5 (only 5, 10, 15...)
  • Decimal places: 2

Integer Only

Prevent decimals:

  • Toggle Whole numbers only

Date Validation

Date Range

  • No earlier than
  • No later than
  • Within last X days
  • Within next X days

Day Restrictions

  • Weekdays only
  • Exclude specific dates

Selection Validation

Selection Count

For multi-select and checkboxes:

  • Min selections
  • Max selections
  • Exact count

File Validation

File Types

Restrict allowed formats:

Images: image/*
Documents: .pdf,.doc,.docx
Specific: .csv,.xlsx

File Size

  • Max file size (e.g., 5MB)
  • Max total size (multiple files)

Image Dimensions

For image uploads:

  • Min width/height
  • Max width/height
  • Aspect ratio

Custom Validation

Formula Validation

Compare field values:

password === confirmPassword
startDate < endDate
quantity * price <= budget

Async Validation

Check against external data:

  • Email uniqueness
  • Promo code validity
  • Username availability

Configure via API endpoint.

Error Messages

Default Messages

Each validation has a default message:

  • "Please enter a valid email"
  • "Must be at least 8 characters"

Custom Messages

Override with your own text:

  1. Add validation rule
  2. Expand Custom message
  3. Enter your text

Support variables:

"Must be at least {{min}} characters"
"Maximum {{max}} files allowed"

Validation Timing

On Blur

Validate when user leaves field:

  • Immediate feedback
  • Less intrusive
  • Default behavior

On Change

Validate while typing:

  • Real-time feedback
  • Can be distracting
  • Good for format masks

On Submit

Validate all at once:

  • Less interruption
  • All errors shown together
  • May miss issues early

Combination

Recommended approach:

  1. Format hints while typing
  2. Full validation on blur
  3. Final check on submit

Client vs Server

Client-side

  • Instant feedback
  • Better UX
  • Can be bypassed

Server-side

  • Always runs
  • Cannot be bypassed
  • Slightly slower

Forms validate both automatically.

Best Practices

1. Be Specific

"Enter a valid email" beats "Invalid input"

2. Show Requirements Upfront

Display format hints before errors:

  • "Password: 8+ characters, 1 number"

3. Real-time Feedback

Show validation state as user types:

  • Green check for valid
  • Red X for invalid

4. Don't Over-validate

Only add necessary rules. Over-strict validation frustrates users.

5. Test Edge Cases

Try:

  • Empty submissions
  • Boundary values
  • Special characters
  • Very long inputs

Next Steps

Tags

formsvalidationdata-quality