Skip to main content

Custom Validation

Beyond the built-in validation options, you can write custom validation rules using JavaScript and customise the error messages shown to submitters.


Custom JavaScript Validation

Use custom validation JS when the built-in options (required, min/max, pattern) cannot express the rule you need — for example, a cross-field check or a business rule with conditional logic.

  1. Select a component
  2. Go to the Validation tab
  3. Scroll to the Custom Validation section
  4. Enter a JavaScript expression that assigns to the valid variable

If valid is true, the field passes. If it is a string, that string is shown as the error message to the submitter.

Example — maximum value with a clear message:

valid = (input <= 14) ? true : 'Maximum 14 days allowed per request.';

Keep expressions short and readable. If the rule takes more than 2–3 lines to express, consider whether it belongs in the workflow instead.

Cross-field validation

Reference other fields on the form using data.fieldKey:

valid = (data.endDate >= data.startDate) ? true : 'End date must be after start date.';

Standard required/min/max validation cannot check one field against another — custom JS is the only way to do this in the form builder.

Weekday check example

const day = new Date(input).getDay();
valid = (day !== 0 && day !== 6) ? true : 'Please select a weekday.';

Custom Error Messages

OSPROV shows generic messages when built-in validators fail — "This field is required.", "Must contain minimum of 3 characters." You can replace each default with a message specific to your form context.

The Custom Errors section appears in the Validation tab, below the standard validation fields. It is a JSON editor — enter a key-value object where the key is the validator name and the value is the message the submitter sees.

Example:

{
"required": "Please enter your employee ID.",
"minLength": "Employee ID must be at least 6 characters.",
"pattern": "Employee ID must start with EMP followed by digits."
}

Common validator keys

KeyWhen it fires
requiredField is empty and marked Required
minLengthText is shorter than the minimum
maxLengthText exceeds the maximum
minNumber is below the minimum value
maxNumber is above the maximum value
patternText does not match the regex pattern
invalid_emailEmail format check fails

Other keys are available for specific component types: invalid_date, invalid_url, mask. Keys are case-sensitive — required works, Required does not.

note

Custom Errors is for built-in validators only. For rules you write yourself in the Custom Validation JS editor, put the error message directly in the valid = expression — that is the normal place for it. The two work independently.


Regular Expression Validation

Use regular expressions for pattern matching without writing JavaScript:

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

Example patterns:

  • ^EMP\d+$ — must start with EMP followed by digits
  • ^[0-9]{6}-[0-9]{2}-[0-9]{4}$ — Malaysian IC format
  • ^\+?[0-9]{10,15}$ — phone number

Add a custom error message via the Custom Errors section using the pattern key to tell submitters exactly what format is expected.