- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个我的用户要求的表格,我清楚地表明该表格是无效的。所以我打算弹出一个sweetalert
对话框让他们知道他们需要仔细检查表格。我想我可以在验证中这样做,以便在提交尝试失败时提醒他们:
const validate = values => {
console.log(formik.isSubmitting); // always prints false
console.log(formik.isValidating); // always prints false
const errors = {};
if (!values.name) {
errors.name = 'Required';
}
if (Object.keys(errors).length > 0 && formik.isSubmitting) {
Swal.fire({
icon: 'error',
title: "Oops. . .",
text: "There are errors with the form. Please double check your options.",
footer: "<div>Problems: " + Object.keys(errors).join(', ') + "</div>"
})
}
return errors;
};
const formik = useFormik({
initialValues: {
name: item.name
},
enableReinitialize: true,
validate,
onSubmit: values => {
// also tried adding
formik.setSubmitting(true);
//do stuff
}
})
但是
isSubmitting / isValidating
总是假的。我需要向
validate
传递额外的 Prop 吗?函数以访问这些值?
最佳答案
我相信 validate
方法不是向用户显示对话框的好地方。
您的用例看起来像是 formik 库的自定义要求。分享他们在内部为表单提交所做的工作 - https://formik.org/docs/guides/form-submission .
您可以添加自定义方法进行提交。
所以,
我已经 fork 了你的沙箱并更新了它 - https://codesandbox.io/s/custom-form-submit-stackoverflow-8znzf
让我知道你的想法。
编辑:添加代码,以便即使链接过期,您仍可能知道该怎么做
import React, { useState } from "react";
import "./styles.css";
import { useFormik } from "formik";
import Swal from "sweetalert2";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
const [item, setItem] = useState({
name: "",
email: ""
});
const validate = (values) => {
console.log("values: ", values);
const errors = {};
if (!values.name) {
errors.name = "Required";
}
return errors;
};
const initialValues = {
name: item.name,
email: item.email
};
const formik = useFormik({
initialValues,
enableReinitialize: true,
validate,
onSubmit: (values) => {
console.log("inside onSubmit", values);
}
});
const customSubmitHandler = (event) => {
event.preventDefault();
const touched = Object.keys(initialValues).reduce((result, item) => {
result[item] = true;
return result;
}, {});
// Touch all fields without running validations
formik.setTouched(touched, false);
formik.setSubmitting(true);
formik
.validateForm()
.then((formErrors) => {
if (Object.keys(formErrors).length > 0) {
Swal.fire({
icon: "success",
title: "Yes. . .",
text: "This one should fire if everything is working right",
footer:
"<div>Problems: " + Object.keys(formErrors).join(", ") + "</div>"
});
} else {
formik.handleSubmit(event);
}
formik.setSubmitting(false);
})
.catch((err) => {
formik.setSubmitting(false);
});
};
return (
<form id="campaignForm" onSubmit={customSubmitHandler}>
<div className="form-group">
<label htmlFor="name">Name</label>
<input
id="name"
type="text"
onChange={formik.handleChange}
value={formik.values.name}
className="form-control"
placeholder="Enter name"
/>
{formik.errors.name ? (
<div className="text-danger">{formik.errors.name}</div>
) : null}
</div>
<div className="form-group">
<label htmlFor="name">Email</label>
<input
id="name"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
className="form-control"
placeholder="Enter email"
/>
{formik.errors.email ? (
<div className="text-danger">{formik.errors.email}</div>
) : null}
</div>
<div className="form-group">
<button className="btn btn-info" type="submit">
Submit
</button>
</div>
</form>
);
}
关于javascript - Formik 验证 isSubmitting/isValidating 未设置为 true,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64774988/
我需要用 formik 或 yup 来验证动态创建的字段。我已经在 jquery validatioh here 中看到了这个验证。 对此 我的代码在这里 https://codesandbox.io
我有一个带有一些文本输入和一些自定义组件的表单。我已经对文本输入进行了 Formik 验证,但对自定义组件没有进行验证。我现在正尝试将 Formik 验证添加到我的自定义 categoriesMult
我有一个通过 Formik 输入的数字,但即使它通过了 Formik 验证,生成的输入仍归类为 string 。 {({ va
我有一个 formik 表单如下。我能够在 formik 组件中提交表单。但是我怎么能在 formik 组件之外提交它(对于这个例子来说是在页脚按钮内)。 Formik 网址:Click here 特
我们有自己的输入组件(例如 Checkbox 、 Textbox ,甚至 CurrencyInput 组件) 我们现在使用Formik 。所以我们替换了所有 { ... return (
当前行为 (this.form = node)} onSubmitCallback={this.onSubmitCallback} render={formProps => {
在 formik , 属性(property)内 onChange ,有时 onChange = {formik.handleChange}有时被称为 onChange = {v => formik.
我正在使用 Yup 来验证我的 Formik 表单,但我不知道如何在 Yup/Formik 中验证 radio 输入。 最佳答案 您验证 radio 组。唯一可能的验证失败是,如果您没有选择默认按钮,
我正在使用 formik 和 @jbuschke/formik-antd。我需要将掩码 +7 (___) ___-__-__ 应用于输入,因此我想使用 react-input-mask。 同时我需要解
我正在尝试使用位于 外部的外部按钮提交表单或标签 如下面的屏幕截图所示,我的按钮位于 Bootstrap > 模态页 footer 分,并且它们位于表单标记之外。当用户单击 Submit 时,我尝试
我正在尝试使用 React、Formik、react-select 和 Firebase(云 firestore)在 React 中构建表单。 当我只使用一次 react 选择时,一切正常。只有一种状
我有客户对象,其中有一系列与之关联的信用卡,如下所示: { "_id":"5d63e3a32f093f2b5e41ef96", "firstName": , "lastName": ,
我正在开发一个单独的模块,该模块旨在包含支持 HTML 输入元素的 formik。 问题是我无法使用 useFields()钩子(Hook),因为我的模块组件没有连接到 formik 上下文。 这是我
我正在尝试重置表单中的所有错误。 我尝试使用 setErrors和 setStatus ,这些都不起作用。 Formik 状态中的错误未清除。 setErrors({errors: {}}) 和 se
当我打开屏幕时,在我第一次提交表单之前我没有看到任何验证错误。正确输入电子邮件地址并通过点击按钮提交表单后,表单逻辑将正常工作。显示警报并重置字段(有意) 但是,一旦我关闭警报,Formik 仍然向我
我有以下表格: import React from 'react' import PanelInputField from './form_components/panel_input_field'
我有以下 Formik 表格 { console.log(JSON.stringify(values)); setSubmitting(true); fetch('/logi
我一直在尝试在 React 中重写我的初学者表单以使用 Formik。 我已经进入正在呈现表单的状态,但是,由于某种原因,我无法更新字段。很明显,我在某个地方犯了一个错误,导致 Formik 无法更新
我想在 formik 中使用 yup 验证我的表单。假设我有 4 个字段 A、B、C、D,它们都是字符串。如果我想让至少一个字段不为空,我应该如何编写验证模式,那么这是一个有效的表单?提前致谢! 最佳
我在 reactjs 中使用 formik 进行表单管理,我有一个关于验证的问题。 我有两个字段,一个是选择国家的选择控件,另一个是邮政编码。 在 country 数组中,我们有正则表达式来验证邮政编
我是一名优秀的程序员,十分优秀!