Validate only one input at 'onBlur' with Yup Schema

[man-on-box]

Hey!

Amazing library and loving it a lot. I am introducing some async tests to a form which is configured to validate at onBlur. I then noticed that the async validation for the one input, was being triggered every time any other input is blurred. This is a request to the API, so is not feasible to run so frequently.

Example of what I mean

The firstName validation test is ran every time any field in the form is changed (logged out to the console):
https://codesandbox.io/s/react-hook-form-v6-validationschema-forked-7cbxn

I understand now that when validation is triggered against the Yup schema, it runs the validation for everything in the schema.

However this must be a common issue for someone running async tests that hits an API for example.

I have been scouring the documentation and examples, but couldn't find anything yet that touches this topic.

Does anyone have any suggestions around this? Perhaps creating a custom resolver that runs validateAt against the schema, per input name? Or have a missed a simple configuration? 🤷

[man-on-box]

Looking at yupResolver, I can see it is calling schema.validate() - which is why validation is happening at schema level every time.

Looking at resolver that's passed into useForm, this calls the callback with all the data in the form - so I don't think it is possible to retrieve the changed field and call .validateAt to trigger validation at an input level.

So right now I'm thinking options are:

1. Remove this async validation from the Yup schema, and trigger this manually when the field is updated (and handle errors with setErrors). Also trigger this manually at form submit, when validation passes after handleSubmit()() is called.

2. Instead of mode: "onBlur", use onSubmit instead at useForm. And then trigger validation for each field in the form manually with a custom onBlur method (don't think I like this approach! It's a big & complex form and this does not scale well).

I might try #1, but I would have thought this would be a common use case scenario with an easy solution. 🤔

[bluebill1049]

sorry for the late reply, just saw the post now. so perhaps you should customer register that input and trigger validation by action? with setValue() so you can control when to trigger the validation. Trigger can also do similar action but not set a value.

[man-on-box]

Thank you @bluebill1049.

I've found a workaround I think - by writing a small validation class for this input that exposes 2 methods. One to check if the value is valid (with no network requests) which is called via the schema - and the other to validate the value via a request to the API.

This means that I can control when the validation is taking place via the API (for example, at onChange or onBlur) - and when the schema level validation is taking place when any other input is being changed, it does not trigger redundant network requests.

I included an example in the original sandbox, which mimics a network request after being triggered after onChange (but throttled using debounce):

https://codesandbox.io/s/react-hook-form-v6-validationschema-forked-t0ez7?file=/src/index.js

This seems to be working ok for my usecase, for reference for anyone else.

[roniny-afk]

@man-on-box
Oh, it's useful. I'm trying to use it in my case.
If you have a new solution please tell me. I'm a newbie.
Thx a lot.

[abelmark]

This seems like a VERY basic use case. Has this been solved natively yet?