微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

带选项卡的表单反应-如果验证失败,如何防止用户进入下一个选项卡

如何解决带选项卡的表单反应-如果验证失败,如何防止用户进入下一个选项卡

我是React的新手,我已经接管了现有应用程序的支持。当前存在一种带有大量“标签”的表单,这些表单实际上是来自antd的轮播对象。当用户进入最后一个选项卡时,他可以选择提交整个文档。如果任何选项卡中的字段验证失败,则用户无法提交,这很好。他们也不知道哪个选项卡有故障。

理想情况下,当他们单击“下一步”转到下一个选项卡时,我想进行验证。我有验证触发-问题是然后验证整个表单。理想情况下,我只想解析当前选项卡上字段的错误对象,但除了将字段传递给处理“ next”的函数外,我没有想到其他方法。在过去的生活中,我让jQuery遍历了当前的div,但这似乎并不是解决此问题的最佳方法。任何想法将不胜感激。

以下是输入示例。表单来自antd表单元素。

       <Form.Item
              label="Name"
              hasFeedback
            >
              {getFieldDecorator('founderName',{
                rules: [{ required: true,message: 'Name is required.' }],initialValue: company.founderName
              })(
                <Input
                  name="founderName"
                  placeholder="Someone"
                  onChange={handleChange} />
              )}
         </Form.Item>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。