Custom Validation

Beyond the built-in validation options, you can create custom validation rules.

Custom Validation Messages

Customize error messages for standard validations:

1. Select a component
2. Go to the Validation tab
3. Enable the desired validation (required, pattern, etc.)
4. Enter a custom error message

Regular Expression Validation

Use regular expressions for pattern matching:

1. Select a component
2. Go to the Validation tab
3. Enable Regular Expression Pattern
4. Enter a regular expression pattern
5. Provide a custom error message

Example patterns:

• Email: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
• Phone: ^\+?[0-9]{10,15}$
• Alphanumeric: ^[a-zA-Z0-9]+$
• Malaysian ID: ^[0-9]{6}-[0-9]{2}-[0-9]{4}$

Custom JavaScript Validation

For complex validation scenarios, use custom JavaScript:

1. Select a component
2. Go to the API tab (Technical Properties)
3. In the Custom Validation field, enter JavaScript
4. Return true for valid input or an error message string for invalid input

Example: Validate that a date is a weekday:

const date = new Date(input);
const day = date.getDay();
if (day === 0 || day === 6) {
  return 'Please select a weekday';
}
return true;

Cross-Field Validation

Validate fields in relation to each other:

1. Use custom JavaScript validation
2. Reference other fields using data.fieldKey

Example: Validate that an end date is after a start date:

const startDate = new Date(data.startDate);
const endDate = new Date(input);
if (endDate <= startDate) {
  return 'End date must be after start date';
}
return true;