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 undefinedif 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]}/>