reactjs - 使用表单验证器对 ReactJs 中的选项卡进行表单验证

问题描述

经历了一些问答，这似乎与选项卡式表单和验证非常匹配。我的问题。但是，它并没有解决我的问题。

我正在使用react-material-ui-form-validator，如果您在ValidatorForm中有多个输入并且您尝试提交，它会向您显示错误并且如果有任何错误则不允许提交表单。

然后，我将输入分成两部分，并在ValidatorForm中使用Material-UI 选项卡。现在提交时它只显示打开的选项卡上的错误，而不是隐藏的选项卡上的错误。检查的一种方法是是否需要某些表单数据，我可以检查提交时的状态并执行诸如不提交和使用感叹号图标更新选项卡标签之类的操作。但是，这不会显示错误字段。

但是，我正在寻找一种无需对提交处理程序进行更多检查即可使其变得简单的东西，而验证器可以在它们为一个分页表单执行操作时执行操作。

这是CodeSandbox 链接供您参考。如果您有任何解决方案，请在代码中分叉您的更改。

标签： reactjsformsvalidationtabsmaterial-ui

Ciao，从技术上讲，无法验证不是当前选择的TextValidatorin （因为其上的元素未加载到 DOM 上）。TabTabTab

但

我们可以做点什么。基本上，每次ValidatorForm验证表单中的元素时，都会调用submit()函数。所以想法是：每次我们更改 Tab 时，我们都可以调用它submit()来验证 Tab 上的元素。

因此，首先，为表单创建一个 ref：

<ValidatorForm
   ref={(ref) => { this.form = ref; }}
  ...

然后，在 Tab 更改时，我们可以this.form.submit()这样调用：

handleTabChange = (event, newValue) => {
   this.setState({ value: newValue });
   this.form.submit();
};

到现在为止还挺好。我试过了，但它不起作用:(更好，它只有在你单击 2 次时才会起作用Tab。为什么？因为Tab有延迟加载。所以要删除这个延迟加载，我们必须删除返回函数的条件value === index。TabPanel然后我删除了，现在它可以工作了:)

但我们可以做得更好。只要未单击提交按钮，就不应验证表单。所以我们可以为状态添加一个额外的布尔值（默认false），当用户点击提交按钮时，我们将这个布尔值设置为 true：

<Button
   onClick={() => {
      this.form.submit();
      this.setState({ submitted: true });
   }}
>
  Submit
</Button>

我们在函数中添加一个条件handleTabChange：

handleTabChange = (event, newValue) => {
    this.setState({ value: newValue });
    if (this.state.submitted) this.form.submit();
  };

因此，在未按下按钮之前，表单仍未验证。如果用户单击按钮，表单将被验证，并且每次用户更改 Tab，TextValidators，如果包含无效值，将显示错误。

在这里您的代码框已修改。

reactjs - 使用表单验证器对 ReactJs 中的选项卡进行表单验证

问题描述

解决方案

推荐阅读