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

文章/答案/技术大牛

发布

1回答

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

我一直在尝试使用React-hook-form和Chakra UI组件库在Next.js中实现一个登录表单，但是我不明白为什么尽管我完全遵循了React-hook-form文档，我的表单验证错误消息仍然不能显示我有它的设置，用户名必须是2-30个字符的长度和密码必须至少是8个字符的长度；两个输入字段都是必需的。

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

回答已采纳

1回答

在vercel上部署下一个js应用程序时，React hook form v7问题

typescript、next.js、react-hook-form、vercel、chakra-ui

我正在使用typescript构建一个带有nextjs和chakra UI的web应用程序。我使用react钩子表单进行表单验证，但是当我在vercel上部署它时，它导致了一个问题。查看图像以查看错误消息。 ?

浏览 7提问于2021-04-07得票数 1

2回答

不识别图像路径的脉轮UI图像组件

reactjs、next.js、chakra-ui

我目前正在学习如何使用ChakraUI 当尝试使用import { Box, Heading, Text, Image } from "@chakra-ui/react";加载本地图像时，它们根本不显示，只显示alt文本，就好像它们的路径没有正确键入一样，我也尝试将图像源直接键入到组件中。nextjs/image组件与nextjs/image正确地工作于--完全相同的路径--而且我没有

浏览 12提问于2021-07-11得票数 2

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

3回答

由于系统颜色模式，脉轮用户界面颜色模式在页面刷新时会发生变化。

typescript、next.js、chakra-ui

我使用Chakra运行NextJS，问题是当useSystemColorMode设置为true时，它会忽略用户在页面刷新时的选择，并将其设置为系统颜色模式。为了前夫。要将其重置为系统首选项，只需从localStorage中删除chakra彩色模式条目.我期望的是最初的颜色模式是系统颜色模式(在我的例子中是暗的)，当用户将按钮切换到光照模式时，页面刷新时应该保持亮。pages\dog

浏览 25提问于2021-12-27得票数 3

回答已采纳

3回答

无法更改Chakra中的默认字体

javascript、reactjs、chakra-ui

第一次使用脉轮，并试图将默认字体更改为Chakra中的，但没有取得任何效果。是否有一个导入(分配了新主题)将其作为道具传递给ChakraProvider，但代码中没有发生任何事情。index.js fonts<App/> </Cha

浏览 7提问于2021-01-25得票数 3

1回答

使用Chakra UI设置MDX文件的样式

reactjs、typescript、next.js、eslint、mdxjs

我正在尝试在next.js应用程序中使用Chakra UI设置markdown文件的样式。为此，我创建了以下MDXComponents.tsx文件： import { chakra } from "@chakra-ui/react" p:然后，我将这个文件导入到_app.tsx中，一切都按照我想要的那样工作。尽管如此，我还是在MDXC

浏览 46提问于2021-07-23得票数 0

回答已采纳

2回答

如何在ReactJs中使用功能组件

javascript、reactjs、next.js

我在Reactjs中工作，我正在使用nextjs框架，现在我正在使用Nextjs从数据库中提取数据，但是现在我得到了以下错误TypeError:无法读取未定义的属性'id‘，如何删除它？这是我目前的代码 export async function getStaticProps() {product

浏览 6提问于2022-10-31得票数 0

回答已采纳

1回答

为什么没有用NextJS从表单中提交动态值？

javascript、reactjs、next.js、formik、chakra-ui

我正在研究基于NextJS代码的React。import { Field, Form, Formik }

浏览 4提问于2022-02-24得票数 2

回答已采纳

3回答

在用户事件脚本中显示用户友好消息

netsuite、suitescript、suitescript2.0

我正在尝试使用用户事件脚本进行一些验证，但我希望在最后向用户显示一些有意义的错误，而不是默认的'suitescript‘错误。有没有办法做到这一点？

浏览 0提问于2019-06-22得票数 0

1回答

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

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

我正在用React-Hook-Form创建一个表单。我将useForm({mode: 'onBlur'})设置为立即触发验证，并在用户onBlur元素后立即显示错误消息。但是，它不适用于包装了自定义<Select />的<Controller />元素。以下是我的代码：import React from 'react'; import { useForm, Controller,

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

回答已采纳

1回答

Vercel cli构建失败，错误为"Type :无法找到模块'Formik‘或其相应的类型声明“。

typescript、formik、vercel

对TypeScript来说还是有点陌生，只有一天半的时间试着让Vercel工作。我正试图通过Vercel cli进行部署。我登录了，通过查看Vercel仪表板中失败的构建日志来验证。当我运行"npx vercel“(我在Windows上)时，我得到的错误是：构建错误：“类型错误:找不到模块'Formik‘或其相应的类型声明。”vercel --prod”在与"form

浏览 1提问于2021-04-20得票数 0

1回答

头样式的更改取决于tsx或jsx扩展

reactjs、typescript、webpack、jsx、chakra-ui

我在app.tsx中有一个简单的函数来呈现一个表。标题可以很好地看到(黑色的白色)。为了复制这一点：cd chakra-ui-header-bug检查标头的元素以了解为什么它是固定的，th标记中的</e

浏览 2提问于2021-07-18得票数 2

回答已采纳

2回答

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

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

我有一个输入type=“文件”的材料ui设计。如何验证文件并显示错误消息？App.jsimport {useForm } from "react-hook-form"; import Button from "@mui/Button type="submit" variant="contained" sx={{ ma

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

1回答

react-hook-form:从api端点获取响应后如何显示验证消息？

reactjs、react-hook-form

为了验证react-hook-form中的输入字段，我执行如下操作 <input type="text" id="name" ref={register({ required: true, maxLength: 30 })} /> 但那是在提交时..从远程api端点获得响应后，我需要显示一些验证消息。在同一个输入字段中...

浏览 19提问于2020-10-15得票数 0

回答已采纳

1回答

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

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

我使用react-hook-form的控制器组件调用material自动完成。当我传递defaultValue参数时，它在字段中填充，但单击submit按钮，然后显示验证错误消息： shared_with_users must be a `array` type, butIf "null" is intended as an empty value be sure to mark the schema as `.nullable()` 这是我<

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

回答已采纳

1回答

如何在JavaScript中仅当错误消息不为空时显示警报？

javascript、reactjs、alert

我有一个添加警报组件的任务，您可以在单击CloseButton时关闭该组件。我已经这样做了，它工作了，但是任务描述还在继续:完成的组件的用法应该是这样的：<ErrorDialog error={error}>，其中error是一个错误消息。如果该错误为blanck，则根本不会显示该对话框。} from '@chakra-ui/react'; import {

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

1回答

来自UI的消息还是来自subs的消息？

error-messages

我正在为使用vb.net的命令行设计一个很小的应用程序，它实际上就是gui。给用户的消息(Msgbox)应该来自UI，或者消息应该来自UI调用的子类和函数。问题3. 应该在UI级别使用if语句，还是应该将用户输入传递给用于if语句处理的子类和函数？

浏览 0提问于2013-06-13得票数 1

1回答

Spring Boot + Thymeleaf -表单验证

spring、thymeleaf

验证表单时，我对Thymeleaf有问题。我试图创建一个简单的用户注册表单来学习Spring，但不幸的是，我陷入了困境。中添加自定义验证器类时private UserFormValidator formValidator; public void initBinder(WebDataBinderbinder) {} @NotEmpty验证注释的</e

浏览 4提问于2017-02-23得票数 5

回答已采纳

1回答

闪存信息没有显示在Reactjs中

javascript、reactjs、next.js

我正在开发nextjs，我正在集成“时事通讯”，每当我的响应为真时，验证消息就会显示正确(如果条件)，但只显示一次，持续5秒，并且每当我收到错误然后验证消息(其他条件)不工作时，就意味着“错误”消息没有在这里显示是我的代码changeEmail = (event) => { const email = event.targe

浏览 7提问于2022-06-30得票数 0

点击加载更多