如果表单在 react-final-form 中提交时出现错误，则显示警报

Question

我正在使用 react-final-form，如果用户尝试提交有错误的表单，我想显示警告。但我不知道该怎么做。我为表单 onSubmit 创建了一个函数，如下所示：

onSubmit={event => {
  event.preventDefault();
  //How to check if the form has any validation  errors?
  if () {
    alert("Errors");
  } else {
    handleSubmit();
  }
}}

如果有任何验证错误，我该如何检查？这是我的 codesandbox.

Answer 1

您可以在 onSubmit 方法中通过检查表单值的每个验证来完成。

相反，请使用文档中提到的 validate 道具：

validate?: (value: ?any, allValues: Object, meta: ?FieldState) => ?any

这样您就可以在各个字段上定义规则并在提交调用之前验证值。

希望对您有所帮助。

Answer 2

有很多可行的方法。这是一个：

<form
  onSubmit={event => {
    if (invalid) {
      alert(JSON.stringify(errors, undefined, 2));
    }
    handleSubmit(event);
  }}
>
  ...fields
</form>

如果表单在 react-final-form 中提交时出现错误，则显示警报

Display an alert if the form has errors on submit in react-final-form

reactjs

react-final-form