问题标签 [yup]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
13852 浏览

javascript - 如何通过单个反应选择正确使用 Yup 模式?

我正在使用react-selectwithFormikYup验证我的表单,但由于某种原因,我的验证不起作用。我的架构如下所示:

我的数据如下所示:

当我在 UI 内的选择中选择一个选项时,返回以下错误:

如何使验证正常工作?

沙盒链接

0 投票
1 回答
5150 浏览

reactjs - Formik + yup:如何验证一个位置模式,其中字段(国家、州、城市)不是强制性的,但如果一个被填写,每个都应该填写?

我有以下架构

firstName和的验证lastName工作正常,但我不知道如何验证location.
要求location完全不需要填写。但是,如果填写了任何(country/ statecity)字段,则必须填写所有三个字段。要么全部,要么没有。

尽管我尝试按上述方式验证它,但它不起作用。

另一个验证要求是:这些值是从selecthtml 元素中选择的,其中第一个<option><option key={0}>-select-</option>. 因此,我不希望我的用户也选择此选项。到目前为止,我正在onSubmit通过检查值来处理它,如果它们包含,-select-那么这些值将不被考虑,并将被现有的值替换。

更新
location永远不能为空。如果用户没有设置任何位置字段,那么也location将是:

location永远不能为空,只有它的属性可以。

我应该如何进行这些验证?

0 投票
2 回答
4054 浏览

reactjs - 如何使用 Formik 和 yup validationSchema 显示表单错误摘要

我想显示 yup validationSchema 发现的所有错误的摘要。

我的 CodeSandbox 示例:https ://codesandbox.io/s/7m3n44po80

这就是它的样子

如果提交时出现错误,它应该是什么样子。在屏幕截图中,错误摘要是硬编码的,就像在我的 CodeSandbox 中一样: 错误摘要

我找不到任何可以抓取所有验证错误的“钩子”。

0 投票
1 回答
2194 浏览

node.js - Formik + Yup 访问嵌套值的错误

我正在尝试同时使用 Formik 和 Yup 来验证我的用户数据,但是当我尝试访问嵌套值的错误时,例如address.line1,我收到一条错误消息,指出它未定义。如何使用 Formik 和 Yup 访问嵌套值的错误?

见 Codesandbox:https ://codesandbox.io/s/ly027lklq7

0 投票
1 回答
3338 浏览

node.js - Formik + Yup 号码验证

您好,我正在尝试使用 Formik + Yup 来验证我的表单。我坚持验证日期的数字,但在添加数字字段后触摸任何字段都会使应用程序崩溃。如何使用 Yup 正确验证数字的最小值和最大值?

查看我的代码框: https ://codesandbox.io/s/ly027lklq7

如果您注释掉全天日期字段,应用程序将正常运行。

0 投票
0 回答
1939 浏览

javascript - 为什么此日期验证不适用于 Formik?

我正在使用 Formik/Yup 来验证表单,并且正在尝试验证生日。

这是我的表格:

这是我的Scehma

当我 console.log 表单的值时,我得到以下信息:

[{dateOfBirth: "2019-05-07"}, {dateOfBirth: "2019-05-07"}]

那不应该工作吗?

我想要实现的是验证出生日期,因此必须在输入中输入日期。稍后我会想确保它不是将来的日期 - 但甚至还不能让验证工作!

有任何想法吗?

沙盒链接

0 投票
1 回答
1770 浏览

reactjs - 为什么是的字符串验证在它是一个对象时不会抛出错误?

我举了一个例子来说明发生了什么(我分叉了第一个谷歌搜索“formik example”)。

我正在使用react-select,它在状态中存储一个具有valuelabel属性的对象。

我正在验证 Formik 表单,Yup.string().required()但它没有显示任何错误。为什么它没有显示任何错误?这是故意的还是错误的?如何解决这个问题?

0 投票
2 回答
8205 浏览

javascript - 是的,验证访问 parent.parent

我正在使用yup模块来验证我的表单。我想访问父级以测试该值。

我的架构:

该方法when可以在同一级别访问,而不是父级。

有人有想法吗?

0 投票
1 回答
5875 浏览

javascript - 使用 Joi 和/或 Yup 进行模式验证,如果存在任何其他属性,是否有办法制作所需的属性集合?

以收集个人详细信息的 HTML 表单为例。

样本表格

注意:代码片段已简化,与屏幕截图不完全匹配。此外,代码片段是使用 Yup 编写的,Yup 是一个与 Joi 非常相似的库,针对的是浏览器而不是 NodeJS。

为了提交表单,我想对地址字段进行验证并使其成为必需,但前提是用户已部分填写了地址部分。总的来说,我想让地址详细信息成为可选的。

这是我的 PersonSchema 的简化版本...

以这种方式定义 AddressSchema 不起作用,因为这些字段始终是必需的......

这是我尝试使地址字段依赖于其他地址字段的存在,但这不起作用,因为您遇到了循环依赖问题......

0 投票
4 回答
1373 浏览

reactjs - React with Firebase - 提交 Formik 表单数据

我有一个反应应用程序,它使用 Formik 作为表单,使用 Cloud Firestore 作为数据库。

我正在尝试将表单数据保存在 Cloud Firestore 中。我的控制台或反应检查器工具中没有错误,当我按下提交时,我可以在反应检查工具中看到按钮变为禁用然后再次启用,但表单不会清除数据并且数据会不会发送到 Cloud Firestore。

我的 handleSubmit 函数有:

我的提交按钮有:

表格很长 - 它有 39 个问题,我可以从我的 Cloud Firestore 数据使用情况中看到,我没有接近读写限制。我不知道如何测量我的表单提交数据的大小以了解表单数据是否超过 Cloud Firestore 限制 - 有没有办法让 Firestore 告诉您这是否是提交不起作用的原因?

我的控制台日志以查看 handleSubmit 中的有效负载没有运行 - 所以我认为肯定有另一个问题 - 我找不到任何关于问题可能是什么的信息。

有没有人遇到过长表单没有发布到 Cloud Firestore 的问题?如果我只保留前 10 个问题,则此表单将提交到数据库。

我认为我在 Firestore 的使用限制范围内:

在此处输入图像描述

下一次尝试

因此,我将 11-39 的每个问题都从表格中取出,并评论了所有 Yup 验证。我一次添加一个问题,发现表单可以正常工作并发布到 Firestore,直到我取消注释验证。他们都通过了——没有错误。所以 - 现在我想知道检查它们的时间是否由 Firestore 计算其进程,也许这会导致超时?那可能吗?如果是这样,有什么方法可以从 Firestore 获得有关这是问题的指示?我的验证如下。

我尝试评论,然后以 10 批取消评论验证。如果我评论从视频到最后的所有验证,表单将成功发布到 firebase。这些验证没有错误。我只是不能拥有它们以及成功发布到数据库。