> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/featured/thoughts/react-validation.md).

# React validation

## React form validation

#### Challenge <a href="#challenge" id="challenge"></a>

* Reuse validation rules, how much flexibility, to compose rules, declarative way and
* Dependencies, from `redux`, `window`, (Parent) Components, form state, react-context
* When to run validation, onChange, onBlur, onSubmit, imperative manual trigger will cause nightmare
* Async validation, needed to be cancellable
* Dirty/touch check is validations is declarative and run on every fields (which is good)

## Common practice

### **Form-level Validation**

**Complete access** to all form state and props whenever the function runs, so you can validate dependent fields at the same time.

**validationContext** can be passed and handled from the same level (top-level)

**I. Formik:**

`<Formik validate={fn}>` and `withFormik({ validate: fn })`, `fn as (formInfo) => errors`

`<Formik validationSchema={yupSchema}>` and `withFormik({ validationSchema: yupSchema })`

**II.React-Hook-Form:**

```
const { register, handleSubmit, errors } = useForm({
    validationResolver: resolver,
    /*
    resolver as (data, context) => errors;
    */
    validationContext: { test: "test" }
  });
```

**etc.**

**Yup is awesome**

### **Field-level validation**

**I. Formik:** `<Field component={Input} name="name" validation={validationFn}>`

**Ref:** <https://jaredpalmer.com/formik/docs/guides/validation>

**II. React-Hook-Form:**

`<Controller as={TextField} name="TextField" control={control} defaultValue="" rule={validationObject}/>`

or

`<input ref={register(ValidationObject)} name="Name"/>`

**etc.**

#### Another approach validation <a href="#flight-search-validation" id="flight-search-validation"></a>

A list of validation rules:&#x20;

validation id binds to **i18n**, **rule**, seems easy while hard for compose and plug.

For rules based logic, consider boolean algebra, and using correct AND, OR, XOR rules:

`validationsToTrigger` for `onChange` event, `validationsToClear` for Priority overwrite. `validationsToClear` can be used for each validation rules, or fields

Hand pick rule for Component onChange.