Field.invalidate() and validate for field with nested field not blocked form submit

[Desteel]

Hello. I use structure

mainField
 - nestedAnswerField
 - nestedCommentField

And i need validate mainField. I set validation for mainField, i get hasError as true and error message, but form can submit and form.errors not display that errors. And if i use Field.invalidate(), i also get hasError as true and error message, but form can submit.

I also tested this with your example from docs

export function isEmail({ field, validator }) {
  if (validator.isEmail(field.value)) return true;
  return field.invalidate(`The ${field.label} should be an email address.`);
}

[foxhound87]

can you provide a codesandbox please?

[Desteel]

can you provide a codesandbox please?

Sandbox

Thank you.

[foxhound87]

Thank you for reporting this issue.

for now you can use this workaround to make it work until I fix it:

const weekValidator = ({ field, form }) => {
  const hasAnswer = Object.keys(field.value).length;

  console.log('week hasAnswer ', hasAnswer);

  if (!hasAnswer) form.invalidate(); // <---

  return [hasAnswer, 'Error message: the week is empty, but form can submit'];
};

[Desteel]

Thank you!

[github-actions[bot]]

:tada: This issue has been resolved in version 5.10.1 :tada:

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[foxhound87]

@Desteel updated sandbox: https://codesandbox.io/s/mobx-react-form-issue-519-forked-e29qi9 now should work as expected

Note: retrieveOnlyEnabledFields has been renamed to retrieveOnlyEnabledFieldsValues in next releases.

[github-actions[bot]]

:tada: This issue has been resolved in version 5.10.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: