Custom Validation Patterns for Text Fields

Custom Validation Patterns for Text Fields

A text field accepts anything users type—but sometimes you need specific formats. Website URLs, product codes, license numbers, or letters-only names all have patterns that make them valid. Custom validation patterns let you define exactly what format is acceptable, catching errors before submission.

In this guide, you’ll learn how to add custom validation patterns to text fields in your WordPress forms.

What Are Validation Patterns?

The Concept

Validation patterns are rules that define what input is valid:

  • “Must contain only letters”
  • “Must be a valid URL”
  • “Must match format ABC-1234”
  • “Must be exactly 10 characters”

How They Work

  1. User types in text field
  2. On submit (or as they type), input is checked against pattern
  3. If it matches: Validation passes
  4. If it doesn’t: Error message shown

Benefits

  • Data quality: Ensure consistent formats
  • Error prevention: Catch mistakes early
  • User guidance: Clear expectations
  • Downstream compatibility: Data works with other systems

Built-in Validation Patterns

Auto Form Builder includes common patterns:

Pattern Validates Example Valid Input
Email Email address format [email protected]
URL Website URLs https://example.com
Letters Only A-Z, a-z only JohnSmith
Numbers Only 0-9 only 12345
Alphanumeric Letters and numbers ABC123
Custom Your own regex pattern (depends on pattern)

Using Built-in Patterns

Step 1: Add Text Field

  1. Open your form in AFB
  2. Drag Text field to form
  3. Click to configure

Step 2: Select Validation Pattern

  1. Find Validation Pattern in settings
  2. Choose from dropdown:
    • None (no pattern)
    • Email
    • URL
    • Letters Only
    • Numbers Only
    • Alphanumeric
    • Custom
  3. Save settings

Step 3: Test Validation

  1. Preview form
  2. Try valid input—should pass
  3. Try invalid input—should show error

Pattern Examples and Use Cases

URL Validation

Use for:

  • Website field
  • Portfolio links
  • Social media profiles
  • Reference URLs

Valid examples:

  • https://example.com
  • http://www.example.com/page
  • https://example.com/path?query=value

Invalid examples:

  • example.com (missing protocol)
  • www.example.com (missing protocol)
  • just some text

Letters Only

Use for:

  • First/last names (simple validation)
  • City names
  • Country codes
  • Alphabetic identifiers

Valid examples:

  • John
  • Smith
  • NewYork

Invalid examples:

  • John123
  • New York (space)
  • O’Brien (apostrophe)

Note: Letters-only is strict. Consider if you need spaces, hyphens, or accents.

Numbers Only

Use for:

  • ID numbers
  • Account numbers
  • Quantity (when not using number field)
  • PIN codes

Valid examples:

  • 12345
  • 00123
  • 9876543210

Invalid examples:

  • 123-456 (hyphen)
  • 123.45 (decimal)
  • 12345A

Alphanumeric

Use for:

  • Product codes
  • Reference numbers
  • Usernames
  • Serial numbers

Valid examples:

  • ABC123
  • User42
  • PROD001

Invalid examples:

  • ABC-123 (hyphen)
  • ABC 123 (space)
  • ABC_123 (underscore)

Custom Validation Patterns (Regex)

What is Regex?

Regular expressions (regex) are patterns that describe text formats:

  • ^ = Start of string
  • $ = End of string
  • [A-Z] = Any uppercase letter
  • [a-z] = Any lowercase letter
  • [0-9] = Any digit
  • {3} = Exactly 3 of previous
  • {2,5} = Between 2 and 5 of previous
  • + = One or more
  • * = Zero or more
  • ? = Optional (zero or one)

Creating Custom Patterns

  1. Select “Custom” from validation dropdown
  2. Enter your regex pattern
  3. Test with various inputs

Common Custom Pattern Examples

US ZIP Code

Pattern: ^\d{5}(-\d{4})?$

Validates:

  • 12345 (5 digits)
  • 12345-6789 (ZIP+4)

Rejects:

  • 1234 (too short)
  • 123456 (too long)
  • ABCDE (letters)

US Phone Number

Pattern: ^\d{3}-\d{3}-\d{4}$

Validates: 555-123-4567

For flexible format: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Validates:

  • 555-123-4567
  • (555) 123-4567
  • 555.123.4567
  • 555 123 4567

Product Code (ABC-1234 format)

Pattern: ^[A-Z]{3}-\d{4}$

Validates:

  • ABC-1234
  • XYZ-9999
  • PRO-0001

Rejects:

  • abc-1234 (lowercase)
  • AB-1234 (only 2 letters)
  • ABC1234 (missing hyphen)

License Plate (Various Formats)

Pattern (US general): ^[A-Z0-9]{1,7}$

Validates: 1-7 uppercase letters/numbers

Credit Card (Basic Format)

Pattern: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Validates:

  • 1234567890123456
  • 1234 5678 9012 3456
  • 1234-5678-9012-3456

Note: For actual payments, use proper payment processors with their validation.

Username (Letters, Numbers, Underscore)

Pattern: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Rules:

  • Starts with letter
  • 3-20 characters total
  • Only letters, numbers, underscore

Validates: user_123, JohnDoe, test42

Hex Color Code

Pattern: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Validates:

  • #FF5733
  • #fff
  • #ABC123

Date (YYYY-MM-DD)

Pattern: ^\d{4}-\d{2}-\d{2}$

Validates: 2026-01-15

Note: For dates, using a Date field with date picker is usually better.

Time (HH:MM 24-hour)

Pattern: ^([01]\d|2[0-3]):[0-5]\d$

Validates:

  • 09:30
  • 14:45
  • 23:59

Invoice Number (INV-YYYY-NNNN)

Pattern: ^INV-\d{4}-\d{4}$

Validates:

  • INV-2026-0001
  • INV-2025-1234

Social Security Number (US)

Pattern: ^\d{3}-\d{2}-\d{4}$

Validates: 123-45-6789

Warning: Be careful collecting SSNs—security and privacy implications.

Building Your Own Patterns

Step-by-Step Process

  1. Define requirements: What format do you need?
  2. Break it down: What characters, how many, in what order?
  3. Build pattern: Translate to regex
  4. Test thoroughly: Valid AND invalid inputs
  5. Write error message: Help users understand format

Example: Employee ID

Requirement: 2 letters + 4 digits + 1 letter (e.g., AB1234C)

Breakdown:

  • 2 uppercase letters: [A-Z]{2}
  • 4 digits: \d{4}
  • 1 uppercase letter: [A-Z]
  • Nothing before or after: ^ and $

Final pattern: ^[A-Z]{2}\d{4}[A-Z]$

Testing Patterns

Before using in form:

  • Test valid inputs (should pass)
  • Test invalid inputs (should fail)
  • Test edge cases (boundaries, special characters)
  • Use online regex testers to debug

Error Messages for Validation

Default Messages

  • “Please enter a valid value”
  • “This field is invalid”

Better Custom Messages

Tell users the expected format:

Pattern Better Error Message
ZIP Code “Please enter a valid ZIP code (e.g., 12345 or 12345-6789)”
Phone “Please enter phone as 555-123-4567”
Product Code “Format: ABC-1234 (3 letters, hyphen, 4 numbers)”
Username “Username must start with a letter, 3-20 characters, letters/numbers/underscore only”

Using Placeholder and Help Text

Prevent errors by showing format upfront:

  • Placeholder: “ABC-1234”
  • Help text: “Enter your product code (e.g., ABC-1234)”

Best Practices

1. Start Simple

Use built-in patterns when possible. Custom regex adds complexity.

2. Don’t Over-Validate

Overly strict patterns frustrate users:

  • Names with hyphens (Mary-Jane)
  • Names with apostrophes (O’Brien)
  • International characters (José, Müller)

3. Show Expected Format

Always tell users what you expect:

  • Placeholder with example
  • Help text explaining format
  • Clear error message

4. Test Edge Cases

  • Empty input
  • Spaces at start/end
  • Special characters
  • Maximum length

5. Consider Alternatives

Sometimes other approaches are better:

  • Dates → Use Date field
  • Numbers → Use Number field
  • Phone → Use Phone field with format
  • Fixed options → Use Dropdown

Combining with Other Validation

Pattern + Required

  • Field must be filled AND match pattern
  • Empty fails “required”
  • Wrong format fails pattern

Pattern + Min/Max Length

  • Pattern validates format
  • Length validates size
  • Both must pass

Troubleshooting Patterns

Pattern Not Working

Check:

  • Syntax is correct (no typos)
  • Special characters escaped properly
  • ^ and $ anchors if needed

Valid Input Being Rejected

Check:

  • Pattern may be too strict
  • Missing valid characters in pattern
  • Case sensitivity issues

Invalid Input Being Accepted

Check:

  • Pattern may be too loose
  • Missing anchors (^ and $)
  • Test with more examples

Frequently Asked Questions

Can I combine multiple patterns?

A single field uses one pattern. For complex validation, combine requirements in one regex using alternation (|) or create the pattern to match all requirements.

Are patterns case-sensitive?

By default, yes. Use [A-Za-z] to match both cases, or add case-insensitive flag if supported.

How do I allow spaces?

Add \s to your character class: [A-Za-z\s] matches letters and spaces.

What about international characters?

Standard [A-Za-z] doesn’t include accented characters. For international names, consider looser validation or use \p{L} (if supported) for any letter.

Should I validate on blur or submit?

Both work. On blur (losing focus) gives faster feedback. On submit catches everything. Many forms do both.

Summary

Adding custom validation patterns:

  1. Choose pattern type – Built-in or custom
  2. Configure pattern – Select or enter regex
  3. Add placeholder – Show expected format
  4. Add help text – Explain requirements
  5. Set error message – Guide correction
  6. Test thoroughly – Valid and invalid inputs

Conclusion

Custom validation patterns ensure data quality by enforcing specific formats. Whether you need URL validation, product codes, or custom identifiers, patterns catch errors before submission and guide users to correct input.

Auto Form Builder includes common patterns (Email, URL, Letters, Numbers, Alphanumeric) and supports custom regex for specialized validation needs. Clean data starts with proper validation.

Ready to validate your form inputs? Download Auto Form Builder and ensure your forms collect correctly formatted data.

Leave a Reply

Your email address will not be published. Required fields are marked *