Validations
By default, all fields comes with Required Validations, just put fRequired
in the fields, and that's it!
<Form inspect>
{// Declareted }
<Field fName='latitude' fRequired>
{(fieldBidings, fieldStatus) => <input {...fieldBidings} />}
</Field>
{// Factored }
<InputField fName={'name'} fRequired/>
</Form>
Custom Validations
Note that every validator should be a FieldValidator
type.
Sync Validations
Sync validations should return undefined
if everything is ok, or an error message if anything is not ok.
export const myRequiredValidator: FieldValidator = (value: any) => {
return value ? undefined : 'This fied is required...'
}
Async Validations
Async validations you should return an CancelableValidator
, that is a tool that allow the validation engine to cancel the validation process. To avoid receiving results that are not welcome anymore, like an user verification, that is triggered as the user types...
export const delayedBobValidator: FieldValidator = (value: any) => {
return CancelableValidator((done, cancel) => {
const timerId = setTimeout(() => {
done(value == 'bob' ? undefined : `No Bob... was "${value}"`);
}, 2000);
cancel(() => { clearTimeout(timerId) })
})
}
Using your validators
// Declarated
<Field fName='name' fExtraValidators={[delayedBobValidator, myRequiredValidator]}>
{(props) => <input {...props} />}
</Field>
// Factored
<InputField fname='name' fExtraValidators={[delayedBobValidator, myRequiredValidator]}/>
Last updated
Was this helpful?