问题标签 [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.
javascript - 如何通过单个反应选择正确使用 Yup 模式?
我正在使用react-select
withFormik
来Yup
验证我的表单,但由于某种原因,我的验证不起作用。我的架构如下所示:
我的数据如下所示:
当我在 UI 内的选择中选择一个选项时,返回以下错误:
如何使验证正常工作?
reactjs - Formik + yup:如何验证一个位置模式,其中字段(国家、州、城市)不是强制性的,但如果一个被填写,每个都应该填写?
我有以下架构
firstName
和的验证lastName
工作正常,但我不知道如何验证location
.
要求:location
完全不需要填写。但是,如果填写了任何(country
/ state
,city
)字段,则必须填写所有三个字段。要么全部,要么没有。
尽管我尝试按上述方式验证它,但它不起作用。
另一个验证要求是:这些值是从select
html 元素中选择的,其中第一个<option>
是<option key={0}>-select-</option>
. 因此,我不希望我的用户也选择此选项。到目前为止,我正在onSubmit
通过检查值来处理它,如果它们包含,-select-
那么这些值将不被考虑,并将被现有的值替换。
更新:
location
永远不能为空。如果用户没有设置任何位置字段,那么也location
将是:
location
永远不能为空,只有它的属性可以。
我应该如何进行这些验证?
reactjs - 如何使用 Formik 和 yup validationSchema 显示表单错误摘要
我想显示 yup validationSchema 发现的所有错误的摘要。
我的 CodeSandbox 示例:https ://codesandbox.io/s/7m3n44po80
这就是它的样子
如果提交时出现错误,它应该是什么样子。在屏幕截图中,错误摘要是硬编码的,就像在我的 CodeSandbox 中一样:
我找不到任何可以抓取所有验证错误的“钩子”。
node.js - Formik + Yup 访问嵌套值的错误
我正在尝试同时使用 Formik 和 Yup 来验证我的用户数据,但是当我尝试访问嵌套值的错误时,例如address.line1
,我收到一条错误消息,指出它未定义。如何使用 Formik 和 Yup 访问嵌套值的错误?
见 Codesandbox:https ://codesandbox.io/s/ly027lklq7
node.js - Formik + Yup 号码验证
您好,我正在尝试使用 Formik + Yup 来验证我的表单。我坚持验证日期的数字,但在添加数字字段后触摸任何字段都会使应用程序崩溃。如何使用 Yup 正确验证数字的最小值和最大值?
查看我的代码框: https ://codesandbox.io/s/ly027lklq7
如果您注释掉全天日期字段,应用程序将正常运行。
javascript - 为什么此日期验证不适用于 Formik?
我正在使用 Formik/Yup 来验证表单,并且正在尝试验证生日。
这是我的表格:
这是我的Scehma
:
当我 console.log 表单的值时,我得到以下信息:
[{dateOfBirth: "2019-05-07"}, {dateOfBirth: "2019-05-07"}]
那不应该工作吗?
我想要实现的是验证出生日期,因此必须在输入中输入日期。稍后我会想确保它不是将来的日期 - 但甚至还不能让验证工作!
有任何想法吗?
reactjs - 为什么是的字符串验证在它是一个对象时不会抛出错误?
我举了一个例子来说明发生了什么(我分叉了第一个谷歌搜索“formik example”)。
我正在使用react-select
,它在状态中存储一个具有value
和label
属性的对象。
我正在验证 Formik 表单,Yup.string().required()
但它没有显示任何错误。为什么它没有显示任何错误?这是故意的还是错误的?如何解决这个问题?
javascript - 是的,验证访问 parent.parent
我正在使用yup
模块来验证我的表单。我想访问父级以测试该值。
我的架构:
该方法when
可以在同一级别访问,而不是父级。
有人有想法吗?
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。这些验证没有错误。我只是不能拥有它们以及成功发布到数据库。