react-final-form: When Use SubmitError . Input Field is Invalid Forever. in 'React' Final Form

when i use <button type="submit" disabled={invalid}>

and use submitError

const onSubmit = async values => {
  if (values.username !== "erikras") {
    return { username: "Unknown username" };
  }

Meta in Username is set Invalid:true When OnChange Username Input it not change meta.invalid

submit button so can’t click anymore.

// but i can hide submitError by meta.dirtySinceLastSubmit

 {(meta.error ||
                  (meta.submitError && !meta.dirtySinceLastSubmit)) &&
                  meta.touched && <span>{meta.error || meta.submitError}</span>}

Sandbox Link

https://codesandbox.io/s/m9vnk7kw8

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 12
Comments: 20 (2 by maintainers)

Commits related to this issue

feat: standardize onSubmit for ActivateCode, Login/Ticket & Keystore to allow the form to be submitted even with submit errors, we check the dirtySinceLastSubmit value. see the following issues for m... — committed to urbit/bridge by shrugs 5 years ago

Most upvoted comments

For anyone landing here, I have made a simple helper for clearing the errors after submit. https://github.com/ignatevdev/final-form-submit-errors

It basically listens for changes in your form and tries to detect if any of the errors in your submitErrors object corresponds to the changed field.

If it does - it clears the error and also removes the path of an error, if necessary, to avoid empty objects and arrays for deep fields.

The library is quite raw and not battle tested yet, but if anyone wants to try it out and give a feedback - you are welcome.

ignatevdev on Sep 9, 2019

Guys, this works:

disabled={hasValidationErrors || (hasSubmitErrors && !dirtySinceLastSubmit)}

paulovitin on Mar 22, 2019

Hey @erikras,

Thanks for your work on this plugin, I’ve loved working with it so far.

However, I am experiencing the same issue as @pagongamedev. @piehouserat and @kocur4d and wondered if this is a bug you might be looking into at some point in the future or if it isn’t actually a bug.

Thanks! Sophie

sophielevens on Feb 15, 2019

I would also recommend against disabling your submit button while invalid. The primary reason for this is that Final Form will mark all your fields as touched if you try to submit and you have client-side validation errors, thus making the errors appear (if you have hidden them when !touched). But the secondary reason is that it won’t block submission like happens in the sandbox shared above.

erikras on Oct 8, 2019

@erikras can we get some clarification on this, is this a bug or desired behaviour? If the latter, is there a suitable workaround?

piehouserat on Jan 25, 2019

So the question is a debatable one: “When does a field with a submit error become valid?” This is specifically why the dirtySinceLastSubmit flag was added, to give everyone finer control over the issue. For example, perhaps the answer to “Should a field with a submit error ever be invalid at all?” might be “no”. I don’t think the answers are clearly black-and-white on either of these. And changing the behavior to have valid/invalid only depend on client-side validation would be a breaking change. Perhaps it would require a separate submitValid/submitInvalid pair for the most recent submit errors?

Also, this sort of hacking that @ignatevdev is exactly the sort of thing that the mutators system was built for.

erikras on Oct 8, 2019