Custom Field Validation Messages

This guide explains how to create custom validation messages using Parsley.js in Formyoula forms.

Related Guides

Set Custom Field Validation - Basic setup

Formyoula Date/Date-Time Element Validation - Date validation examples

Date Field Validation - Custom date validation with JavaScript

Basic Syntax

The standard format for custom validation is:

validation-type || validation-value || custom-message

Example:

data-parsley-range || [1,10] || Value should be between 1 to 10

Common Validation Examples

Number & Text Validation

Range:

data-parsley-range || [1,10] || Value should be between 1 to 10

Digits Only:

data-parsley-type || digits || Please enter only digits

Required:

data-parsley-required || || This field is required

Length:

data-parsley-minlength || 5 || Please enter at least 5 characters
data-parsley-maxlength || 50 || Maximum 50 characters allowed

Email:

data-parsley-type || email || Please enter a valid email address

Phone Pattern:

data-parsley-pattern || ^[0-9]{10}$ || Please enter a 10-digit phone number

Date Validation

No Past Dates:

data-parsley-disable_past || || Date cannot be in the past

No Future Dates:

data-parsley-disable_future || || Date cannot be in the future

Date Comparisons:

data-parsley-before_equal_specified_date || field-id || Date should be before or equal to specified date
data-parsley-after_equal_specified_date || field-id || Date should be after or equal to specified date

Advanced Techniques

Using Merge Fields

Use field IDs for dynamic validations:

{{field-id-1}} || {{field-id-2}} || {{field-id-3}}

Multiple Validations

Combine multiple validations on the same field:

Validation 1: data-parsley-type || digits || Please enter only digits
Validation 2: data-parsley-range || [2, 6] || Value should be between 2 and 6

Custom JavaScript Validators

window.Parsley.addValidator( 'custom_name', {
  requirementType: 'string',
  validateString: function( value, requirement ) {
    // Your validation logic
    return true; // or false
  },
  messages: {
    en: 'Your custom error message'
  }
});

Implementation

Using Field Validation Element

  1. Add your input field + "Field Validation" element
  2. Select field to validate
  3. Add validation rule using syntax above
  4. Save and test

Using Custom Attributes

  1. Select your field → Custom Attributes
  2. Type: input
  3. Name: validation attribute (e.g., data-parsley-range)
  4. Value: validation value and message
  5. Save and test

Best Practices

✅ Good Messages:

  • "Please enter a value between 1 and 10"
  • "Email address is required"
  • "Date cannot be in the past"

❌ Avoid:

  • "Invalid input" / "Error" / "Wrong"

Tips:

  • Use field IDs instead of labels (avoids special character issues)
  • Test with various invalid inputs
  • Empty message = default Parsley messages

External Resources

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂