在TypeScript中的Formik验证中分配错误消息不起作用
是因为可能存在以下几种情况：
- 错误消息未正确分配：在Formik验证中，错误消息通常是通过设置表单字段的验证规则来分配的。如果错误消息不起作用，可能是因为错误消息没有正确地与表单字段关联起来。请确保在验证规则中正确设置错误消息。
- 表单字段未正确绑定：在Formik中，表单字段通常是通过使用Field组件来绑定的。如果错误消息不起作用，可能是因为表单字段未正确地与Field组件绑定。请确保在Field组件中正确设置name属性，并将其与表单字段名称匹配。
- 表单验证未触发：Formik提供了一个handleSubmit函数来处理表单的提交操作，并触发表单验证。如果错误消息不起作用，可能是因为表单验证未正确触发。请确保在提交表单时调用handleSubmit函数，并确保在handleSubmit函数中包含表单验证的逻辑。
- 错误消息未正确显示：在Formik中，错误消息通常是通过ErrorMessage组件来显示的。如果错误消息不起作用，可能是因为错误消息未正确地与ErrorMessage组件关联起来。请确保在ErrorMessage组件中正确设置name属性，并将其与表单字段名称匹配。
总结起来，要解决在TypeScript中的Formik验证中分配错误消息不起作用的问题，需要确保错误消息正确分配、表单字段正确绑定、表单验证正确触发，并且错误消息正确显示。如果问题仍然存在，可能需要进一步检查代码逻辑或查阅Formik的文档和示例来获取更多帮助。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain
相关·内容
此时此刻，我正在尝试构建一个用户输入表单，用户需要在其中使用React & TypeScript中的Formik输入姓名、电子邮件和密码。处理输入本身工作得很好，现在我想向输入表单添加验证功能，所以我编写了如下代码。> ) 我想根据用户输入的密码长度是否足够长来显示一条错误消息，但即使密码太短也不会显示错误消息。我在validat
浏览 10提问于2020-07-07得票数 1
回答已采纳
1回答
Problem ->我正在尝试进行一个验证，以便在切换语言时更改Formik错误消息，但只有当我点击submit按钮调用"formik.onSubmit"或更新表单中的字段时，Formik才会自动更改错误消息，以便在我键入"formik.handleChange"时更新错误消息。(() => {
setE
浏览 12提问于2020-05-20得票数 1
1回答
我正在处理一个前端应用程序，必须将验证添加到表单中。我是ReactJS的新手，在开发的路上学习。updateCu
浏览 8提问于2022-06-20得票数 0
我想在表单挂载时显示字段错误。在屈服之后不会。是的： field: Yup.string().required('Required')福米克：谢谢你帮忙！
浏览 12提问于2020-05-19得票数 9
回答已采纳
1回答
在ReactJS中，我正在开发一个类组件，并使用Formik进行验证。我可以做验证，但错误信息显示为正常颜色(黑色)。如何在任何HTML元素(span、div等)中添加此错误消息。下面是要验证的代码 import React, { Component } from 'react'
import { useFormik } from 'formik&#x
浏览 46提问于2020-06-28得票数 1
回答已采纳
下面的代码在提交时验证，textbox的onFocusOut很好，我希望它能触发验证，首先用初始值重新加载页面。 我试过validateOnMount和其他软件，但都不起作用。 这里遗漏了什么？})
return ( <Formik
onSubmit
浏览 40提问于2020-08-10得票数 5
1回答
数组元素的子类型
、、、、
一个关于从数据结构构造类型的问题。我有一个这样的数组： interface ICVSection { validation: Yup.ObjectSchema<any>; namespace: typeof SummarySchema,} 我不能百分之百确定这在TypeScript中是否可能，但如果是这样，如果有人能证明我是
浏览 15提问于2019-10-09得票数 2
回答已采纳
我使用Formik和yup验证，遵循以下模式： setStatus(''); // cleanvalidationSchema = Yup.object({ .... <Formik<MyErrorComponent m
浏览 7提问于2020-11-25得票数 7
1回答
TL:DR 在formik中，如果我有一个以点符号编写的字段名(例如name="hands.left")，它链接到initialValues中嵌套对象的属性(例如hands: {left: " ",right: " "})，那么在使用验证错误时如何使用该字段名，也就是访问对象属性(errors.hands.left和errors["hands.left"]
浏览 11提问于2021-01-20得票数 0
回答已采纳
我使用Fomik和Yup在应用程序中实现授权和注册。在所有输入字段(包括已注册的用户名)中写入并按submit按钮后，我在浏览器Ctrl + shift + I中单击选项卡Network
浏览 1提问于2020-04-12得票数 0
我正在对Yup使用formik验证。我已经创建了一个自定义react选择组件来选择多个选项。当用户选择一个选项时，其id将推送到一个数组中。这是必填字段。因此，我使用此代码对其进行了验证，但不会出现错误消息。然后会出现错误消息，但当我选择选项时，错误消息不会消失。interest: Yup.array().min(1, "at least 1").required("This field
浏览 11提问于2021-10-01得票数 0
因此，我在react组件中有一个Formik表单，它处理几个文本输入和几个文件上传。，表单验证中断:直到我选择一个包含文件输入的文件时，才会显示验证错误，然后才会突然出现错误消息(问题不是验证本身，而是以错误消息的形式显示验证结果)。因此，假设我尝试提交一个原封不动的表单，希望所有的错误消息都会出现(因为表单<
浏览 47提问于2020-11-10得票数 1
回答已采纳
我有一个多页的Formik表单，我想在应用程序中使用柏树进行测试。我想验证当用户在最终页面上提交表单时，所有字段都被正确填充。我试图挂载包含formik表单cy.mount()的组件，它给出了一个错误“意外字符'�'”。另外，我尝试将id分配给formik表单，然后使用cy.get中的id (“#id”)访问它。使用的命令： cy.mount()；
cy.get
浏览 0提问于2019-07-09得票数 1
下面是我使用React的formik表单验证代码。默认情况下，在加载表单时，我希望禁用submit按钮：import * as Yup from "yup";
}), handleSubmit(values);
浏览 6提问于2019-12-22得票数 51
回答已采纳
现在尝试正确地实现Formik (表单库)。我在下面代码中名为handle400Error的方法中使用此方法。我的React (和Form
浏览 0提问于2018-10-25得票数 44
回答已采纳
1回答
如何使用Yup遍历对象的键
、、、、
有人能建议使用Yup遍历通用创建的表单的最好方法吗？ 因此，在我的应用程序中，用户可以添加无限数量的小表单，只要求客户姓名(必需)，姓氏和年龄。我一般使用Formik来创建它们，并且只在最后一次提交所有表单时才运行验证。来自Formik的值的最终格式是： `` {
0:{name:"Valentin", surname:"Ivanov&qu
浏览 49提问于2020-07-14得票数 0
但是，我不知道在Reactinative中使用库是合适的，还是完全实现表单更好。
我见过像Formik和这样的选项
浏览 3提问于2022-12-02得票数 1
我正在使用Formik创建表单。当我在一个表单中使用FieldArray时，我得到错误提示：Field.tsx:81 Uncaught TypeError: Cannot read property 'getFieldProps' ofundefined 为了验证我是否做错了什么，我复制了文档中的示例并使用了它。不幸的是，文档中的示例不起作用。你知道为什么它会变得更糟吗？ 下面是我复制到我
浏览 57提问于2021-08-05得票数 1
回答已采纳
2回答
我正在从api中捕获错误，并在表单中显示它们，这工作得很好。但问题是，当我在表单中更改一个字段时，所有错误都会消失。对于表单，我使用Formik，对于验证，我使用Yup。
浏览 25提问于2019-06-28得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
