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.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.
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
value,fieldProps,fieldsandform, 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:
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:!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.
Last modified 4yr ago