Field has error but is still valid

Hey there, thanks for this great library! Everything worked perfectly so far, except now I have a very strange behavior for a text field that has errors (they are even shown in the form correctly) but still validates to true and the onSuccess handler is called on the form.

Here is a screenshot of the console.log output of the form.get call for this field:

I guess this state (errors are set & displayed but field hasError is false) should not be possible?

It worked fine on a form where we used material-ui and now im trying it with react-toolbox although i don’t think that is the problem?

[darko-mijic]

Thanks @foxhound87. We where using react-intl and our validators where returning an object instead of a string for validation errors. This was causing the issue.

From @DominikGuzei’s example:

const isValidWalletName = ({ field }) => {
  const isValid = field.value.length >= 3;
  return [isValid, messages.invalidWalletName]; // this is defined elsewhere (not important)
};

messages.invalidWalletName was an object:

invalidWalletName: {
    id: 'wallet.create.form.errors.invalidWalletName',
    defaultMessage: '!!!The wallet name must have at least 3 letters.',
    description: 'Error message shown when invalid wallet name was entered in create wallet dialog.'
  }

And it needed to be a string so the fix was to provide a validator with i18n features of react-intl to return a string for validation error instead of passing an object.

[foxhound87]

I don’t know how react-intl work, I never used it. You can try to use stateless components if you are using classes with local state. If you can setup a small test project I will take a look.