Validation

The library extends vee-validate with metadata-driven rules and message resolution.

Using restriction

The restriction property on a field definition is the primary way to add validation. The library translates each key into a registered vee-validate rule automatically:

{
  name: 'username',
  type: 'text',
  fieldOptions: { label: 'Username' },
  restriction: {
    minLength: 3,
    maxLength: 20,
    pattern: '^[a-zA-Z0-9_]+$',
  },
}

Restriction	What it validates
minLength / maxLength	String length
length	Exact string length
pattern	Regex pattern
minInclusive / maxInclusive	Numeric range (inclusive)
minExclusive / maxExclusive	Numeric range (exclusive)
enumeration	Value must be one of the listed options
fractionDigits	Maximum number of decimal places
totalDigits	Maximum total significant digits
whiteSpace	'preserve', 'replace' (no tabs/newlines), or 'collapse' (no leading/trailing/multiple spaces)

Built-in Rules

Each restriction key maps to an XSD-inspired vee-validate rule registered by the library:

Restriction	Rule
(required field)	xsd_required
(array minOccurs)	xsd_minOccurs
(choice minOccurs)	xsd_choiceMinOccurs
minLength	xsd_minLength
maxLength	xsd_maxLength
length	xsd_length
pattern	xsd_pattern
minInclusive	xsd_minInclusive
maxInclusive	xsd_maxInclusive
minExclusive	xsd_minExclusive
maxExclusive	xsd_maxExclusive
enumeration	xsd_enumeration
whiteSpace	xsd_whiteSpace
fractionDigits	xsd_fractionDigits
totalDigits	xsd_totalDigits

These rules are attached automatically — you never reference them by name unless writing custom validation expressions.

Message Sources

Messages resolve in this order:

1. settings.messages
2. vee-validate configure({ generateMessage })
3. default rule output

The message resolver supports:

• positional placeholders like {0}
• named placeholders like {min}, {length}, {digits}
• context placeholders like {field}

Custom Validation

You can still provide custom vee-validate validation expressions in metadata:

{
  name: 'text',
  type: 'text',
  validation: 'xsd_minLength:3|xsd_maxLength:10',
}

The library splits multi-rule expressions into separate validation functions so multiple errors can be collected consistently.

Example Configuration

const settings = {
  messages: {
    required: '{field} is required',
    minOccurs: 'At least {min} items required',
    choiceMinOccurs: 'Select at least {min} value(s) in {field}',
    minLength: 'The minimum length of {field} is {length}',
  },
};

Interactive Example

Account details

Combines restriction-based rules with custom and async validation.

Username

Letters, numbers and underscores only. 3-20 characters.

Email

Format is checked with a restriction. Availability is verified asynchronously — try admin@example.com.

Password

Must contain 8+ characters, uppercase, lowercase, a number and a special character.

Confirm password

Re-validated automatically whenever the password field changes.

Profile

Whitespace and length restrictions keep data clean without writing a single validation function.

Display name

Leading/trailing spaces and repeated whitespace are rejected via the whiteSpace: collapse restriction.

Bio Optional

Optional. Max 200 characters.

Website Optional

Optional. Validated with a custom function — must be a valid http(s) URL.

Date range

End date is validated against the start date. computedProps re-triggers validation on endDate whenever startDate changes.

Start date

End date

Billing

Numeric and format restrictions — no custom code needed.

Amount (USD)

Must be greater than 0, at most $10,000, and no more than 2 decimal places.

Promo code Optional

Optional. Must be 4-8 uppercase letters or digits (e.g. SAVE2025).

IsDirty: false
Touched: false
Valid: true

// form values:
{
  "account": {},
  "profile": {},
  "dateRange": {},
  "billing": {}
}