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.
Any field supports synchronous and asynchronous validation, and any combination of those.
The majority of validation rules reside in the dedicated validation schema. It is a good place to start declaring validation in your application.
There are multiple ways to apply validation to a field (listed by priority, from highest to lowest):
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
form, and returns the message string
Allows to associate a message with a specific rule name
The result of a validation is reflected in the validity state. It contains two properties:
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.
!fieldProps.valid !== fieldProps.invalid
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.
We are using a specific validation format—validation schema. It is, however, a plain Object that can be used even without React Advanced Form.