Getting started

The biggest difference when switching to React Advanced Form validation is that it diverges from a conventional single validate function and uses a dedicated validation schema to determine the next validity state of the fields.
Validation types
Any field supports synchronous and asynchronous validation, and any combination of those.
React Advanced Form comes with a smart multi-layer validation built-in. Learn more on the Priority & Exclusion of the validation rules.
Validation schema
The majority of validation rules reside in the dedicated validation schema. It is a good place to start declaring validation in your application.
Validation schema
Applying validation
There are multiple ways to apply validation to a field (listed by priority, from highest to lowest):
​Field-specific rules
​Form-specific rules
​Application-wide rules
Validation messages
Validation is a communication between your system and a user. Converse clearly with our versatile API and smart fallback system. Take advantage of the key features of a validation message:
Completely decoupled from the validation schema
Each message can be a function that accepts the field's value, fieldProps, fields and form, and returns the message string
Allows to associate a message with a specific rule name
Validation messages
Validity state
The result of a validation is reflected in the validity state. It contains two properties:
valid (boolean)
invalid (boolean)
Those properties can be accessed on the fieldProps in a field component declaration and various callback methods. We recommend to base the validation UI based on the validity state.
Please note that valid and invalid states are not interchangeable, thus:
1
!fieldProps.valid !== fieldProps.invalid
Copied!
This value separation is crucial for initial validity state. When a field is mounted, it is neither valid, nor invalid, thus the values of both properties are set to false. Further field interactions update the validity state correspondingly.
Exposed props
Backwards compatible
We are using a specific validation format—validation schema. It is, however, a plain Object that can be used even without React Advanced Form.

Architecture - Previous

Reactive props

Next - Validation

Validation schema

Last modified 3yr ago

Copy link

Contents