如何在react中使用react-hook-form显示错误消息

文章/答案/技术大牛

发布

2回答

材料用户界面TextField的最新反应钩子式错误处理

reactjs、material-ui、react-hook-form

我有困难，使用反应钩形式的材料-用户界面。import React from "react"; /> <input type="submit" &#x

浏览 6提问于2021-04-08得票数 6

回答已采纳

1回答

React选择&React钩子-形式控制器问题

reactjs、react-select、react-hook-form

我正在尝试实现来自react-hook-forms for react-select的react-select，但为了做到这一点，我需要使用来自react-hook-forms的Controller，但是当我使用我的react-select component代码import Select from 'react-select'; impo

浏览 7提问于2022-02-08得票数 1

回答已采纳

1回答

reactjs、react-hook-form

如何添加验证，我希望显示错误消息为电话号码字段(helperText，最小10，最大10 )，也显示错误消息，如果提交没有10个数字 import ReactPhoneInput from "react-phone-input

浏览 117提问于2021-09-10得票数 0

回答已采纳

2回答

使用react-hook-form using hooks在表单提交时显示成功消息

reactjs、react-hooks、react-hook-form

我有一个表单，可以正确地执行错误验证，但如果所有内容都填写并提交，则无法尝试显示成功消息。我正在使用react-hook-form包，但在文档中找不到任何东西。我已经创建了errorMessage，它只是一个使用react-hook-form文档提示的开关 import React from "react"; import { useForm } from "react-hook

浏览 33提问于2020-04-23得票数 2

2回答

即使在选择文件之后，也要对文件上载显示错误进行MuiFileInput验证。

reactjs、validation、react-hooks、material-ui、mui5

如何验证文件并显示错误消息？App.jsimport {useForm } from "react-hook-form"; const { register, handleSubmit, formState: { errors },} = useForm(); const [file, setFile] = <

浏览 16提问于2022-11-13得票数 0

1回答

带有Chakra UI的React-hook-form在NextJS中不显示验证错误消息

javascript、reactjs、next.js、react-hook-form

我一直在尝试使用React-hook-form和Chakra UI组件库在Next.js中实现一个登录表单，但是我不明白为什么尽管我完全遵循了React-hook-form文档，我的表单验证错误消息仍然不能显示然而，对于无效的表单提交，错误消息应该显示在无效输入的下面，但事实并非如此。然而，我已经注意到，无效的输入字段将在提交时获得焦点。

浏览 20提问于2020-09-07得票数 1

回答已采纳

2回答

提交后，react-hook-form无法正确验证value和onChange

reactjs、onchange、react-hook-form

&& errors.test.message} </form>}; 当我点击"Submit“时，react-hook-form显示错误信息：‘字段是必需的。’。当我想写单词"TEST“，下一步我尝试删除这个文本，例如选择所有文本并点击Backspace按钮，然后我不能从输入中删除这个文本，但是显示</e

浏览 40提问于2021-01-28得票数 2

1回答

更新react钩子表单中的错误

javascript、reactjs、typescript、react-hooks、react-hook-form

所以我创建了一个自定义的输入包装器，它从react-hook-form中接收了几个道具。这是我的文本输入 register, errors我传入这些属性，如果options中的任何条件不满足，我都会尝试显示一条错误消息。errors[id] &&

浏览 2提问于2021-06-04得票数 0

1回答

如何解决错误:模块‘react* form’没有导出成员'useForm‘*

reactjs、typescript、react-hook-form

我想使用Reacti-钩子表单制作简单的登录页面。我知道这个错误：import { Box, TextField } from '@mui/material'; type InputForm = {

浏览 12提问于2022-05-06得票数 1

回答已采纳

2回答

如何将yup validationSchema与react-hook-form一起使用？

javascript、reactjs、yup、react-hook-form

我正在使用react-hook-form库和yup来验证输入字段： const { handleSubmit, register, errors } = useForm({ ); 它不会在控制台中抛出错误我希望当输入被触摸并且值小于或大于所需值时，会显示错误消息。如何通

浏览 45提问于2020-08-11得票数 1

回答已采纳

1回答

为react钩子窗体实现错误时遇到问题

reactjs、forms、validation、input、react-hook-form

我希望在react-hook-form中实现错误消息，我注意到了一些非常奇怪的行为，我似乎无法修复它们。例如:在任何字段中，如果我不能满足规定的标准，将弹出错误消息(这是正确的)。但是，如果我删除输入，则只会显示错误图标，而不会显示消息。此外，我在根据输入框对齐错误消息时遇到了问题。我使用了保证金来做这件事，但它没有响应。

浏览 16提问于2021-06-24得票数 0

1回答

React-select & creatable select，reatc-hook-form关注验证错误

javascript、reactjs、frontend、react-select、react-hook-form

我在一个react-hook-form中使用了create select组件。我尝试了react-select和creatable-react-select两者，我在这个问题的上下文中体验到的行为是相同的。使用最新的react-hook-form (7.6.1)，当有错误绑定到字段时，我不能将字段设置为焦点。当我使用一个老版本的react-hook-form时，我可以让这个行为像预期的那样工作。因为我想让这个行为在最新的re

浏览 3提问于2021-05-19得票数 0

回答已采纳

1回答

如何以反应钩子的形式为setValue设置正确的类型？

reactjs、typescript、react-hook-form

然后，我得到以下错误消息： Type 'UseFormSetValue<Inputs>' is not assignable to type 'UseFormSetValue<Record<string

浏览 5提问于2021-04-27得票数 4

回答已采纳

2回答

Material ui复选框在React-hook表单中不起作用

yup、react-hook-form、react-material-ui-form-validator

我想做一个带有验证的表单，我使用了react-hook-form和Material UI。对于验证，yup和钩子/解析器也被使用。当我单击复选框时，我想显示另一个textField，但复选框不起作用。watch用于来自react-hook-form(useForm)的内容。我的错误是什么？求求你，救命。这是我的代码：-

浏览 15提问于2021-06-17得票数 2

1回答

如何在模糊上触发React-hook-form控制器验证？

javascript、reactjs、react-hooks、react-hook-form

我正在用React-Hook-Form创建一个表单。我将useForm({mode: 'onBlur'})设置为立即触发验证，并在用户onBlur元素后立即显示错误消息。以下是我的代码：import React from 'react'; import { useForm, Controller, ErrorMessage } from 'react-hook-formfrom 'react</e

浏览 22提问于2020-05-07得票数 1

回答已采纳

1回答

react-hook-form中“”UseFormReturn“”类型上不存在属性“”errors“”

reactjs、react-hook-form

当我使用react-hook-form时，我无法从react-hook-form中解析错误对象。

浏览 96提问于2021-11-06得票数 3

1回答

React Hook清理/键入时显示错误消息

reactjs、react-hooks、react-hook-form

我刚开始使用React，我正在使用react-hook-form来管理警告/错误消息。但是，如何在键入时显示错误消息？例如，在名字中，它应该显示我是否只键入了一个字符，如果我有两个或更多个字符，它就会消失。另外，我是否需要在提交表单后清除错误变量？如果是这样，我应该如何清洁它？

浏览 15提问于2021-01-05得票数 0

回答已采纳

3回答

在react-hook-form中处理错误

reactjs、react-hook-form

根据react-hook-form的文档，我可以像这样使用输入元素的名称"xxx.yyy“，这将导致我准备的数据是 { xxx: { yyy: value }} 但是，当我尝试使用这个带有“错误”的功能时，我无法使用它。Documentation说我应该使用这个链运算符？，所以我试了一下： {errors?.xxx?.yyy && <span>This field is required</span>} 但是，如果省略了必需的输

浏览 77提问于2019-12-23得票数 2

回答已采纳

1回答

为什么不将预填充值设置为在自动完成材料用户界面中使用react钩子形式控制器的值？

autocomplete、material-ui、yup、react-hook-form

我使用react-hook-form的控制器组件调用material自动完成。当我传递defaultValue参数时，它在字段中填充，但单击submit按钮，然后显示验证错误消息： shared_with_users must be a `array` type, but我使用yup进行表单验证。提前谢谢你

浏览 4提问于2021-03-11得票数 0

回答已采纳

1回答

React-Hook-Form -在表单验证出错时在输入内添加图标

reactjs、react-hooks、react-hook-form

我正在尝试用react创建表单，并且已经处理了大部分的验证工作(比如显示消息)。当输入无效时，我还想在输入中添加icon/img。对此最好的方法是什么？import { useForm } from 'react-hook-form'; function Form(

浏览 0提问于2021-05-27得票数 2

点击加载更多

材料用户界面TextField的最新反应钩子式错误处理

React选择&React钩子-形式控制器问题