search

final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

validateOnBlur={false} ignored #293

Open ThiefMaster opened 6 years ago

ThiefMaster commented 6 years ago

In both https://codesandbox.io/s/5vv3m4q4yk and https://codesandbox.io/s/6zjomplyx3 I would expect no error to show up after focusing and defocusing a field.

Versions:

ThiefMaster commented 6 years ago

Looks like the problem is actually that validation runs on form creation, even before any fields are focused, defocused, changed, etc.

ThiefMaster commented 6 years ago

Adding a touchOnBlur={false} option like in redux-form would probably avoid this - I don't really care about validation running on form creation and/or blur, but I do care about not getting errors when the user blurs an otherwise-untouched field.

My usecase it a form with one required field, which I'm autofocusing when the form is displayed. But if the user clicks on the "Cancel" button that of course results in the field being touched and the validation error showing up. Especially when this results in the buttons being pushed futher down, this results in rather bad UX.

semy commented 6 years ago

The same for me...

Any update on this issue @erikras ?

vasilich6107 commented 6 years ago

@erikras the same for me(

erikras commented 6 years ago

Synchronous validation is run continuously, on every render. It's up to you to decide when to show them. If you don't want them to show on a pristine field, then you can only show when it's dirty. If you want to show them even for pristine fields when the submit has failed because of validation, you can include submitFailed.

Check this out:

{meta.error && (meta.dirty || meta.submitFailed) && meta.touched && <span>{meta.error}</span>}

Edit React Final Form - Issue #293

Does that solve everyone's concerns?

taneba commented 6 years ago

Synchronous validation is run continuously, on every render.

In my case (using react-final-form with react-virtualized) this causes performance problem.

Is there any workaround for preventing validation on every render? (I'm sorry may be it's not appropriate question for this Issue though) @erikras

semy commented 5 years ago

@erikras Any update here? I have heard this problem more often from other devs. Can we work out a solution that will help everyone and inspire even more people to use final-form?

The validation topic is very important...

Wait for your feedback mate 👍

callmeberzerker commented 5 years ago

Have you guys tried to memoize the validation?