Validation
react-fluent-form
comes with a build in validation approach that also enables customization.
Basic Usage
In this example validation will be added for a username
and password
field.
Adding validation to config
Using withValidation
either a yup.Schema
or a validate function
can be provided for each field. Providing a yup.Schema
will result in a string[]
error type. In contrast to that you can return any type of data when using validate function
's:
Validation properties
touched
, validity
and errors
are properties which are mostly relevant for validation. They are similarirly structured to values
and fields
:
touched
: stores information about touched state of each field. A field is touched once it had focus and then lost it, so from a technical perspective if theonBlur
event of an input field was triggert.- example:
{username: true, password: undefined}
- possible values:
true
,false
orundefined
(undefined
means it was not touched yet)
- example:
validity
: stores information about validation state of each field.- example:
{username: false, password: undefined}
(undefined
means it was not validated yet). - possible values:
true
,false
orundefined
(undefined
means it was not validated yet)
- example:
errors
: contains the current errors of each field. In case of an error the evaluation ofyup
schemes will result in astring[]
type.- example:
{username: ["username is a required field"], password: undefined }
- possible values:
any custom type
or undefined (undefined
means the field was not validated yet or that it's valid).
- example:
Displaying errors
In order to properly display error messages (and maybe also success messages) properties touched
, validity
and errors
can be used. To handle validation failures on submission a callback can be provided as second argument of handleSubmit
:
If default validation triggers are used, it's enough to only check the errors
object:
Validation context
In some cases it's required to work with values outside of your form.
This is where validation context
comes into place.
Initial context
Context always need to be an object:
Setting context dynamically
If you want to update your context as soon as your context values have changed, you can take advandage of useEffect
:
Triggering validation
You can trigger validation of all fields on context changes:
Accessing context
Conditional validation
Often it's necessary to adapt validations for a field based on the values of other fields in your form (and also the context). This can be done via yup.Schema
's or via validate function
's.
It's very important to note that validate function
's can also return yup.Schema
's conditionally. The returned yup.Schema
will not be treated as an error type, it will be evaluated, thus the error type will be string[]
.
important
When using yup.Schema
's other form fields need to be accessed with a leading $
(here $lastName
) which usually means the value is comming from the context. In fact other form values are passed as context to the yup.Schema
instances for each field during validation execution.
If a context property is named equal to a field property, the field property will be overriden in yup.Schema
s context!