ReValidateMode 'onChange' doesn't validate after changes?

Describe the bug Not sure if this is a bug or just a misunderstanding on what reValidateMode does…

If I set mode to onBlur and reValidateMode to onChange I expect the value of an input to be validated for the first time when a blur happens on the input (mode).

Assuming the value is not valid, it is in error state at this point. Now, if I change the value of the input to something that is valid, as soon as the value is valid, I would expect the validation to be triggered again, showing no error anymore, as reValidateMode is set to onChange.

If reValidateMode is set to onBlur as well, I would expect it to only validate again when I blur the field after changing the value to a valid one, showing no errors anymore.

The documentation states:

This option allows you to configure when inputs with errors get re-validated after submit. By default, validation is only triggered during an input change.

The description is a bit confusing, as it mentions re-validated after submit, but this doesn’t make sense, as when I set reValidateMode to onChange there is no submit?

To Reproduce Steps to reproduce the behavior:

Open Codesandbox with mode: "onBlur" and reValidateMode: "onChange"
Click on placeholder lastName inside of text field
Type in text Test Name
Click anywhere on the blue background (to blur the text field)
lastName error appears
Click inside of the lastName text field on the right of Test Name (so that the caret is at the end of the text)
Press the backspace key until Name is not there anymore (resulting in Test with space at the end being the value of the text field)

Codesandbox link https://codesandbox.io/s/react-hook-form-useform-template-t597v?file=/src/index.js

Expected behavior At this point, I would expect the error lastName error to disappear, since the lastName text field is now valid (Test contains 5 characters, limit is 5) and an onChange event happened (from pressing the backspace key the last time).

Actual behavior The error lastName error is still present and only disappears when clicking anywhere on the blue background to blur the text field. I would only expect this to happen if reValidateMode was set to onBlur as well.

Desktop (please complete the following information):

OS: macOS
Browser: Chrome
Version 83

Issue Analytics

State:
Created 3 years ago
Reactions:11
Comments:26 (14 by maintainers)

Top GitHub Comments

16reactions

dwiyatcicommented, Aug 21, 2020

@bluebill1049 That’s brilliant. Turned out it’s pretty easy (and rather clean!) to make the workaround I need to satisfy my UX requirements. I have to set both mode and reValidateMode to 'onBlur' though, and then trigger the validation manually onChange only if the control is invalid (has any errors).

I’ll simply leave my CSB here just in case future readers might find it useful: https://codesandbox.io/s/react-hook-form-v6-triggervalidation-forked-cbfvt?file=/src/index.js

Thanks again, Bill!! 😃

16reactions

dwiyatcicommented, Aug 13, 2020

I’m glad that I came across this issue one month later 'cause actually I want to implement a UX in exactly the same line of theorem as @martinfrancois 🙂

— ✂️ snip ------ There are a couple rules of thumb that guide how we implement validation triggers:

Do not eagerly scold users for invalid data

A field should not be changed into an invalid state while the user is interacting with the field
This often means holding back on presenting updated validation results until focus leaves the field (onBlur)

Eagerly reward users for correcting invalid data

The user should be informed as soon as a field is changed from invalid to valid state
This often means presenting updated validation results as soon as the validation state changes from invalid to valid, including on keypress (onChange)

On the surface, these rules can seem slightly contradictory. Do not validate until blur, but validate on change? However, there is a subtlety involved based on the current field validation status. If the field is already invalid, then we should update the validation results on change, without waiting for focus to leave. But if the field is was previously valid or it hasn’t yet been validated, then we should wait until focus leaves the field before updating the validation results for the field. This approach improves usability and decreases frustration for the user. — ✂️ snap ------

It’s so unfortunate that RFH would need a breaking change if this “ideal” behaviour were to be introduced. 😕 But thank you so much @bluebill1049 for such a amazing masterpiece, and for suggesting this workaround:

however, RHF is flexible, you can set both mode to onSubmit and trigger validation accordingly, or simply always trigger the errors and use form state to filter when to display errors

I will try to follow this suggestion and will come back again if I have any questions ✨😁

Top Results From Across the Web

react-hook-form: Validation not working when using onBlur ...

Changing the valiation mode to onChange will validate after change event is triggered, when all of the values are up-to-date:

useForm | React Hook Form - Simple React forms validation

Validation will trigger on the blur and change events. reValidateMode: onChange | onBlur | onSubmit = 'onChange' ! React Native: Custom register or...

Create powerful and flexible forms with React Hook Form

Learn how to create performant, flexible, and extensible forms with easy-to-use validation with React Hooks.

react hook form validate on blur - You.com | The search engine you ...

react-hook-form cannot directly direct the blur state of select component. ... Changing the valiation mode to onChange will validate after change event is ......

React Hook Form - Cheatsheet Code

we can use React.memo to prevent re-render except isDirty state changed ... reValidateMode (?). onChange ... validation strategy after user submit the form....