FieldValidationRules

Defines the comprehensive set of validation rules that can be applied to form fields. This interface outlines all available validation types that can be configured for each field in the form. Each validation type accepts a ValidationRule containing both the validation criteria and an optional custom error message.

Props

The following table outlines the props for the FieldValidationRules:

NameTypeDefaultDescription
creditCard
-

Validates that the input is a valid credit card number. Checks length (13-16 digits) and applies Luhn algorithm validation.

creditCard: [true, 'Invalid credit card number']
customValidator
(value: FormValueType) => string | null
-

Allows for completely custom validation logic as a function. This function receives the field value and should return either:

  • A string containing an error message if validation fails
  • null if validation passes
customValidator: (value) => {
  if (typeof value === 'string' && !value.includes('@company.com')) {
    return 'Email must be a company email';
  }
  return null;
}
date
-

Validates that the input can be parsed as a valid date. Uses Date.parse() to validate the string can be converted to a date.

date: [true, 'Please enter a valid date']
dateIso
-

Validates that the input follows ISO date format (YYYY-MM-DD). Ensures strict compliance with the ISO date standard.

dateIso: [true, 'Date must be in YYYY-MM-DD format']
digits
-

Validates that the input contains only numeric digits (0-9). Rejects inputs containing decimal points, signs, letter characters or spaces.

digits: [true, 'Please enter only numeric digits']
email
-

Validates that the input conforms to a standard email address format. Checks for proper formatting with @ symbol and domain structure.

email: [true, 'Please enter a valid email address']
equalTo
-

Validates that the field's value exactly matches another field's value. Takes the name of another field as the first parameter.

equalTo: ['password', 'Passwords must match']
max
-

Validates that a numeric value doesn't exceed the specified maximum. Takes a number as the first parameter in the validation rule.

max: [100, 'Value cannot exceed 100']
maxLength
-

Validates that a string doesn't exceed the specified maximum length. Takes a number as the first parameter in the validation rule.

maxLength: [100, 'Cannot exceed 100 characters']
min
-

Validates that a numeric value is at least the specified minimum. Takes a number as the first parameter in the validation rule.

min: [18, 'Value must be at least 18']
minLength
-

Validates that a string has at least the specified minimum length. Takes a number as the first parameter in the validation rule.

minLength: [6, 'Must be at least 6 characters long']
number
-

Validates that the input contains a valid numeric value. Ensures the field can be converted to a number without errors.

number: [true, 'Please enter a number']
range
-

Validates that a numeric value falls within the specified range. Takes an array of two numbers [min, max] as the first parameter.

range: [[1, 10], 'Value must be between 1 and 10']
rangeLength
-

Validates that a string's length falls within the specified range. Takes an array of two numbers [min, max] as the first parameter.

rangeLength: [[8, 16], 'Must be between 8 and 16 characters']
regex
-

Validates that the input matches the specified regular expression pattern. Takes a RegExp object or a string pattern as the first parameter.

regex: [/^[A-Z][a-z]+$/, 'Must start with capital letter followed by lowercase letters']
required
-

Validates that the field has a non-empty value. When configured with [true], the field cannot be empty, null, or undefined.

required: [true, 'This field must be filled in']
tel
-

Validates that the input conforms to a standard telephone number format. Checks for proper formatting of phone numbers with optional country code.

tel: [true, 'Please enter a valid phone number']
url
-

Validates that the input is a properly formatted URL. Checks for proper protocol, domain structure, and path format.

url: [true, 'Please enter a valid website URL']