issue: Yup validation with "test"-function validates too early

[endwaa]

Version Number

7.33.1

Codesandbox/Expo snack

https://codesandbox.io/s/goofy-golick-iigcco?file=/src/App.js

Steps to reproduce

1. Click on "Add"
2. Click on "Delete" for the newly added field (causing validation error)
3. Click on "Add" again
4. Type some text (longer than 2 characters)
5. Click on "Add"
6. Click on "Delete" for the newly added field (validation error disappears)

Expected behaviour

When useForm is used with mode onSubmit I would expect no validation errors before the user actually tried to submit the form. From the codesandbox you can see that the use of "test" on the field someList is causing an error - even before submitting the form. However, the "test" function used on item in someList is working as expected, only validating after hitting the submit button.

There is also some strange behaviour with how the validation message disappears from someList. Adding the required amount of items does not clear the validation error, but adding one more item and then deleting it causes the validation error to disappear.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

To be fair, the .test operator is designed to do exactly that, from what I can read in their docs:

Tests are run after any object is cast.

RHF provides a resolver for each validation library, meaning, it's only an adapter / an interface for the library and it doesn't manipulate validation logic.

[endwaa]

Perhaps I was a bit unclear, the Yup validation seems to work as expected. The yupResolver will return validation result after any object is cast, but only the validation error from someList is picked up by the errors-object from the formState. With mode: onSubmit I would expect RHF to hold back the validation results until the user tries to submit the form - which is the case for other validation results e.g. the test on item in someList.

[Moshyfawn]

Provided, yup mutates it's object, there's a chance we can't do anything with it's validation behavior (might be wrong)

[bluebill1049]

please use the debug step to verify what data is sent to the hook form for the validation. field array validation on the input itself and after user action at useEffect.

resolver: async (data, context, options) => {
  // you can debug your validation schema here
  console.log('formData', data)
  console.log('validation result', await anyResolver(schema)(data, context, options))
  return anyResolver(schema)(data, context, options)
},

[patrickyan]

Have you found a solution here? I am running into the same issue using a test validation function to check an API for username uniqueness. Even though the form is set to onSubmit, the test is trigged both on page load and onChange for every key press.

[endwaa]

I have not found a good solution for this problem yet.

[leapful]

@patrickyan @endwaa

I think the problem has been solve with react-hook-form 7.41.3, you can check it out here: https://codesandbox.io/s/still-leftpad-u3qcbc

[leapful]

@patrickyan

Could you please share the steps to re-produce ? It works fine with your codesandbox url.

Screen.Recording.2023-01-04.at.15.16.17.mov

[endwaa]

There is still something odd with the validation after you submit (with validation errors). As yous see in the video below, the validation for the whole list is not going away when it meets the criteria again (more than one item). But the validation for each field is correctly updating - also after submit.

Screen.Recording.2023-01-05.at.08.08.50.mov

[leapful]

@endwaa

Validation error is shown because it's related to the whole field array while onChange only updates field state which is related to the target field array item is currently on change.

This is an expected behavior as validation on field level will help to reduce re-rendering the whole form and just update state for the changing field.

If you want to clear field array validation error, you need to clear it on onChange of each field array item by using setError method.

[patrickyan]

@leapful It seems like it only happens after you click submit. Then if you try to add another field, it starts validating on every button pressed instead of waiting until the next submit press.

I will have to test to see if the latest version works for my issue with making an api call in a test.

[endwaa]

@leapful If this is an expected behaviour why does the validation error for the array field disappear when I'm removing the third item (at the end of the video)? Its just feels like an inconsitency when the array field validation is updated. Why is removing something from the array triggering a re-validation but not when adding an item?

@patrickyan What you describe is actually a useful feature in many cases. If you submit a form with validation errors its good practice to give feedback to the user that the field is valid after correction.

[leapful]

@patrickyan

I think the behavior is already described clearly in here: https://react-hook-form.com/api/useform

By default, after first form submitting, validation will be triggered on change of each field element.

@endwaa

The behavior about global error message is cleared when removing third item related to your validation rules of yup, not from react-hook-form.

Like the documentation above, after submitting, validation will be trigged on change of each field but yup by default will stop on validation for case schema has parent - child relation.

The validation timeline:

1. Submit the form
2. Global error of the whole field array is shown
3. Add second item without filling data for it => Yup validation is stopped at child item level => Global validation cannot be removed.
4. Add third item then filling data for second item => Yup validation is done with valid on child item level, continue to validate its parent validation => Global validation is cleared after removing third item as remove method from useFieldArray hook triggers re-rendering the whole component with new valid form state.

[endwaa]

@leapful Thanks for the clarification!