Formik ReactBoostrap表单未验证
Formik是一个用于构建React表单的开源库，它提供了一种简单且强大的方式来处理表单验证、状态管理和表单提交等功能。React Bootstrap是一个基于React的UI组件库，它提供了一套现成的UI组件，可以帮助开发者快速构建漂亮且响应式的用户界面。
在使用Formik和React Bootstrap构建表单时，如果表单未经验证，可以采取以下几种方式处理：
- 表单验证规则设置：使用Formik提供的验证规则设置，可以通过定义验证函数来验证表单字段的有效性。可以使用正则表达式、自定义函数或内置的验证函数来验证字段的值。例如，可以验证字段是否为空、是否符合特定的格式要求等。
- 错误消息显示：当表单字段未通过验证时，可以使用Formik提供的错误消息显示功能来展示相应的错误信息。可以在表单字段的下方或旁边显示错误消息，以提醒用户输入的有效性。
- 表单提交处理：在表单提交时，可以使用Formik提供的提交处理函数来处理表单数据。可以在提交之前再次验证表单字段的有效性，确保所有必填字段都已填写并通过验证。如果有任何字段未通过验证，可以阻止表单提交，并显示相应的错误消息。
- 表单重置：如果用户需要重新填写表单，可以使用Formik提供的重置功能来清空表单字段的值，并重置验证状态。这样用户可以重新开始填写表单，而不必手动清空每个字段的值。
Formik和React Bootstrap的结合使用可以提供一个完整的表单解决方案，使开发者能够轻松构建具有验证功能的交互式表单。腾讯云没有直接相关的产品和产品介绍链接地址，但可以使用腾讯云提供的云计算服务来支持表单的后端处理和存储，例如使用云函数（Serverless）来处理表单提交，使用云数据库来存储表单数据等。
相关·内容
2回答
导入Yup验证时表单提交不起作用
、、、、
我从外部文件导入的验证正在运行。但是，表单提交功能不起作用。 我将验证设置如下并导出。 import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
mail: Yup.string()
.email('Lütfen geçerli bir e-posta adresi giriniz!')
.required('Boş bırakılamaz.'),
password: Yup.string
浏览 15提问于2020-09-12得票数 1
我正在尝试使用React和Material处理“接受服务条款”复选框的复选框验证。
到目前为止我这么做了：
验证模式
const validationSchema = yup.object().shape({
email: yup
.string()
.email('Enter a valid email address')
.required('Email address is required'),
password: yup
.string()
.min(8, 'Password should be
浏览 8提问于2022-08-29得票数 0
回答已采纳
2回答
防止Formik清除表单
、、、
我有一个Formik表单，在验证所有字段并提交表单后自动清除。这个表单的目的基本上是注册一个新用户，所以它是一个相当长的表单。
问题是，有时用户输入的电子邮件已经被使用，或者其他一些值从后端反弹回来。对于一个用户来说，如果仅仅因为一个值是不正确的，就要求您从一开始就填写一个表单，这是非常恼人的。
如何防止Formik自动清除此表单，或至少等待后端的响应，然后根据错误程度清除或保留表单的值。
我的形式是这样构造的；
<Formik
initialValues,
onSubmit
validationSchema,
>
{()=> return (
<Form
浏览 0提问于2020-08-05得票数 2
回答已采纳
7回答
Yup中的条件验证
、、、
我有一个电子邮件字段，只有在选中复选框时才会显示(布尔值为true)。当表单提交时，如果复选框被选中(布尔值为true)，我只需要这个字段。
这就是我到目前为止所尝试的：
const validationSchema = yup.object().shape({
email: yup
.string()
.email()
.label('Email')
.when('showEmail', {
is: t
浏览 0提问于2018-03-21得票数 79
我有一个带有Formik表单的有状态函数组件，它根据isSubmitting的值呈现不同的内容。
const MyPage: FunctionComponent<Props> = ({propOne, propTwo}) => {
<Formik ...>
...
{isSubmitting ? (
<div>show this on submitting</div>
) : (
<div>show this when not</div>
)}
</For
浏览 2提问于2020-04-28得票数 6
我正在尝试使用Formik和Yup验证一个材料ui表单，但我得到了一个错误。 这是我从另一个文件导入的模式。 export const schema = Yup.object({
email: Yup.string()
.email('Invalid Email')
.required('This Field is Required'),
}); 这就是我使用验证的地方。如果我编写validation = schema，它不会给出错误，但也没有验证。如果我把它改成{schema}，应用程序就会崩溃。 export default funct
浏览 29提问于2020-04-07得票数 1
回答已采纳
在我们的React应用程序中，一个页面中有多个表单。我们将Formik和Yup分别用于表单和验证。
目前，只有当字段/表单被触摸时才会触发验证。我们在Formik上构建了一个包装器，在模糊/焦点事件上提交表单。
现在，要求是在一个页面中显示包含多个Formik表单的页面中所有所需字段的错误。
为了进一步澄清，我的包装器看起来像
const { onSubmit, className, style, ...restProps } = this.props;
return (
<div
ref={this.setContainerRef
浏览 2提问于2021-04-20得票数 1
我正在使用Formik在我的应用程序中处理表单。使用useRef，我成功地在Formik外部调用了Formik props。
const form = useRef(null);
const formProps = form.current;
useEffect(() => {
getUser(props.match.params.userId)
}, []);
console.log(formProps)
<Formik
ref={form}
initialValues={userData}
validationSchema={validationSch
浏览 0提问于2019-10-28得票数 0
3回答
我在我的react应用程序中使用formik作为表单。 class myComponent extends Component {
constructor(props) {
this.state = {
inputData: {}
}
}
render() {
return(
<Formik>{({ errors, handleChange, values }) => (
console.log(values);
<Field type="text" name="addr
浏览 26提问于2019-02-14得票数 3
我和formik有一个问题。基本上，我将有一个表，其中列出了所有存在错误的表单的Id。当用户单击表单的Id时，它将显示表单本身。要求是在呈现表单时也应该显示错误。有人知道怎么用Formik吗？此外，如果用户编辑字段，字段验证应该正常工作。
我把密码箱链接放在这里。。基本上，我希望当表单出现时，我应该看到错误，而不仅仅是当用户从字段移开或更改时。谢谢。
import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";
class Post0
浏览 19提问于2019-10-08得票数 11
回答已采纳
我有一个表单在一个反应应用程序，使用Formik与您的验证。除了用户可以输入一个带有一个或多个空格的字符串到字段之外，验证还可以正常工作，这将允许验证通过并提交表单。我看不到一种明显的方法来确保输入到每个字段中的字符串不是包含空格(“”)的空字符串。
这是我的代码：
const formik = useFormik<yup.InferType<typeof validationSchema>>({
initialValues: {
addressLine1: portfolioState.clientAddress.addressLine1,
浏览 6提问于2022-01-06得票数 2
2回答
在一个有许多输入(比如40个字段)的formik表单中，我可以看到表单是缓慢的。
这是我的formik配置：
const formik = useFormik({
enableReinitialize: true,
initialValues: contractor,
validateOnBlur: true,
validateOnChange: false,
validateOnMount: true,
validationSchema: // YUP validation here
浏览 8提问于2022-01-24得票数 1
回答已采纳
我正在尝试使用formik &实现表单验证。我有一个登录/注册表单与三个字段(姓名，电子邮件，密码)。单击“创建帐户”按钮时，将有条件地呈现“名称”字段。我希望只有在表单处于寄存器状态时才需要name字段。我使用状态变量isLogin保存表单的当前状态，还使用它在formik的initialValues中初始化showName布尔值。现在，name字段没有对其应用验证，如果name字段为空，则可以提交表单。
我的密码
const [isLogin, setIsLogin] = useState(true);
const initialAuthFormValues = {
hide
浏览 13提问于2022-06-20得票数 0
1回答
我正在尝试将formik包装在实体ui react表单组件周围。它可以很好地与TextField组件配合使用。请找到下面的代码： <TextField
id="firstName"
name="firstName"
label="First Name"
variant="outlined"
autoComplete="off"
value={
浏览 18提问于2021-01-09得票数 0
在使用formik和Yup验证表单之后，如何将四个输入表单数据存储到本地存储中。
浏览 6提问于2022-09-30得票数 -2
我正在做一个项目，在管理面板上，医生可以为他们的治疗设定佣金。但它可能只有两位数长。但佣金不可能是0。它可以是任何0.01或0.001。我使用formik和yup创建了一个表单。但是不知道如何为这项工作设置输入字段。我试过了，但没有找到任何解决办法。
Yup验证
commission: Yup.string()
.required()
.matches(/^[0-9]+$/, "Commission should contain only digits")
// .min(1, 'Must be exactly 1 digits&
浏览 5提问于2021-08-05得票数 2
回答已采纳
这看起来可能很长，但这只是因为我想确保提供我所拥有的所有信息。因此，我在react组件中有一个Formik表单，它处理几个文本输入和几个文件上传。我在React类组件中使用了这个Formik组件： <Formik
initialValues={{
...initialValues, //no need to list them all here
affiliateLogo: null,
}}
validationSchema={validationSchema}
onSubmit(values=>{//do something with the v
浏览 47提问于2020-11-10得票数 1
回答已采纳
我正在处理一个react-native表单，formik和我的验证有问题，我希望验证被发送到Alert.alert(errorMessage)，而不是像这个<Text>{errorMessage}</Text>这样的文本机器人。这是我的实际表单：
import { View, Text, StyleSheet } from "react-native";
import { Formik } from "formik";
import yup from "yup";
import SubmitButton from "
浏览 4提问于2019-03-26得票数 1
回答已采纳
下面是我使用React的formik表单验证代码。默认情况下，在加载表单时，我希望禁用submit按钮：
import { useFormik } from "formik";
import * as Yup from "yup";
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.obje
浏览 6提问于2019-12-22得票数 51
回答已采纳
1回答
如何在提交时禁用验证？
、、、
我有一个多步表单，并将每个步骤保存在一个<Formik />标记下。每个步骤的初始值和验证模式保存在对象中：
const initialValues = {
step1Values: { ...values1 },
step2Values: { ...values2 },
step3Values: { ...values3 },
}
const validationSchema = Yup.object().shape({
step1Schemas: { ...yupSchema1 },
step2Schemas: { ...yupSchema2 },
s
浏览 4提问于2021-02-16得票数 0
我目前正在使用Formik库在React JS中制作一个表单。我遇到了一个验证问题，我需要用空字符串更改无效的字母。 str.replace(/\D/, '); 但是我不能访问Formik值中的input。我需要在每次按键时验证值，但Formik文档中没有关于它的信息。 组件Form import React, {useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import { Formik, Form, useFormikContext } from &#
浏览 15提问于2021-08-31得票数 0
我使用的是Formik的最新版本(2.2.9)，并且有一个由大约64个Material DatePicker控件动态生成的表单。目前，每个单独的焦点或模糊都会重新渲染两次。Formik的FastField似乎就是这个问题的答案，但是使用它并没有什么不同，每当Formik上下文对象发生变化时，每个输入仍然会被多次重新呈现。我从其他有类似问题的人那里读到了一些论坛帖子，但他们都不确定FastField是否有问题。 我对FastField的理解正确吗?如果我有一个表单，并且每个输入都包装在一个FastField中，那么只有当与该字段关联的值在Formik上下文中发生变化时，该字段才应该重新呈现。如
浏览 39提问于2021-09-01得票数 0
我使用Formik和yup验证，遵循以下模式：
const handleSubmit = async (values, { setStatus }) => {
setStatus(''); // clean errors messages
try {
... do submit work ...
const res = await sendData( convertValues(values)); //
... more work
} catch (e) {
console.error(e);
setStatus(&
浏览 7提问于2020-11-25得票数 7
1回答
尝试在表单提交上生成验证字段。(同时，onblur和onchange也必须是活动的)但是当我离开字段时是空的，然后提交表单。它不会产生任何错误。
这怎么可能？
我的第二个问题是:当我将值发布到rest时。它可能返回400个错误，我希望将这些错误用于我的验证字段。下面是我的api响应：
{ "msg"：“缺少必需字段”、“错误”：{“名称”："validation.required“、”国家“："validation.required”、“城市”："validation.required“}
必须让验证错误命名字段、城市和国家字段。
浏览 3提问于2020-10-01得票数 1
回答已采纳
3回答
我和Yup有一个经典的Formik表单，就像这样：
// Schema for the form
const OrderFormSchema = Yup.object().shape({
lastname: Yup.string()
.required('Ce champs est obligatoire.'),
firstname: Yup.string()
.required("Ce champs est obligatoire"),
company: Yup.string()
.required('Ce cham
浏览 21提问于2022-07-15得票数 2
回答已采纳
1回答
我有一个自定义的验证函数，但是即使它没有返回错误，表单仍然是无效的。 我将以下属性传递给Formik： validate={({ import_files }) => {
return [...import_files.values()].length === 0
? { import_files: 'Please choose a file to import' }
: {};
}}
onSubmit={onSubmit}
initialValues={{ import_files: new Map([]) }} Here is
浏览 87提问于2020-03-31得票数 1
回答已采纳
我正在做一个多步骤表单，我已经将步骤划分为单独的组件，并将其作为子组件传递给父formik组件。像这样
<FormikComponent>
<ChildStepComponent/>
</>
在更改子组件中的输入值时，是否有方法获取Formik提供的值和错误？
浏览 1提问于2022-10-31得票数 2
我有一个用React和Formik写的表单。表单当前有3个字段(为了便于参数，让我们假设有3个字符串，它们使用Yup验证为必填字段)。 如果其中一个字段包含一个特定值，我想删除另一个字段，以及相关的验证。例如，如果字段x包含值'somestring'，我希望字段y出现并且是必需的，但是如果字段x包含的值不是'somestring'，我希望字段y不出现，因此不是必需的。 我是React和Formik验证的新手，所以不确定如何计算字段的当前值并基于此更改呈现。 我正在尝试使用React函数组件而不是类组件来实现这一点。 // react imports
impor
浏览 31提问于2020-12-03得票数 1
回答已采纳
作为标题，Formmik和antd Form都做同样的事情：
%1验证%2数据绑定%3错误消息
formik
antd表单
它们是否具有相同的功能？
浏览 2提问于2020-04-12得票数 1
1回答
我正在尝试为使用Formik构建的React本机组件编写一些测试。这是一个询问用户名和密码的简单表单，我想使用一个使用Yup构建的验证模式。
当我使用模拟器并手动测试表单时，表单按照预期的方式运行，只有当输入值无效时才会显示错误消息。
然而，当我尝试用@testing-library/react-native编写一些自动化测试时，这种行为并不是我所期望的。即使提供的值是有效的，错误消息也会在测试中显示。以下是守则：
// App.test.js
import React from 'react';
import { render, act, fireEvent } from &
浏览 1提问于2021-01-16得票数 2
回答已采纳
我找不到一种方法来测试表单yup验证： it('displays error on submit if name is empty', async () => {
const wrapper = mount(<MyFormik/>)
const getForm = () => wrapper.find('form')
wrapper.find('input[name="name"]').simulate('change', {
persist: ()
浏览 19提问于2019-04-29得票数 2
2回答
我有下面的表格
<Formik
initialValues={{
email: '',
password: ''
}}
onSubmit={(values, { setSubmitting }) => {
console.log(JSON.stringify(values));
setSubmitting(true);
fetch('/login', {
method: 'POST',
body: JSON.stringify(values),
浏览 2提问于2019-06-28得票数 6
1回答
我现在有几天的问题，我在Formik表单的onSubmit方法中设置的每个错误都没有添加到错误道具中。我的具体问题是关于GraphQL API返回的后端错误。我有一个相当长的表单，所以我不会发布所有的代码，但是相关代码如下：
这是我的表单的一个片段：
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
{({ errors, setFieldValue, touched, values }) => (
<&g
浏览 2提问于2021-05-19得票数 4
我使用Material-ui与Formik和Yup进行表单验证，但在单击cancel按钮时，禁用表单验证时遇到了困难。尝试使用formik resetForm，但它不起作用！你能帮帮我吗?
通过单击cancel按钮，它不工作了！
谢谢你的帮助!
码
import { Box, Button, Grid } from "@mui/material";
import { Field, Form, Formik } from "formik";
import * as Yup from "yup";
import { makeStyles
浏览 6提问于2022-02-22得票数 1
回答已采纳
我正在构建一个React组件，它从外部API调用动态加载表单数据。在用户完成之后，我需要将它提交回另一个API端点。
下面是：
import React, { useEffect, useState } from "react";
import axios from "axios";
import TextField from "@material-ui/core/TextField";
import { useFormik } from "formik";
const FORM = () => {
const [f
浏览 2提问于2021-01-27得票数 1
回答已采纳
福米克医生说
要在Formik中提交表单，您需要以某种方式启动提供的handleSubmit(e)或submitForm支柱。当您调用这些方法之一时，Formik每次都会执行以下操作(伪代码)：
-以异步和深度合并的方式运行所有字段级别的验证、验证和validationSchema
我不明白递交表格的程序。handleSubmit，onSubmit，submitForm的区别是什么？
即使我提供了一个同步验证函数，验证也总是异步运行吗？
上述三个函数中的哪个函数异步运行？他们还能有什么回报？
浏览 0提问于2019-07-12得票数 9
1回答
何时使用表单与调查
、、、
什么时候选择用表单钩子、最终表单、formik或使用SurveyJS之类的东西在ReactJS中构建自己的表单？做你自己的表格是不是有点过时了？
浏览 7提问于2021-04-26得票数 0
我有一个react原生的Formik表单和一个Yup validationSchema。当用户提交表单时，我想创建一个警告与错误字段，如果有字段是无效的。 Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1", 我曾尝试在Formik呈现中使用isValid，并创建了一个Alert with errors，但得到了一个空的errors对象。但是，如果我再次提交/或单击submit两次，error对
浏览 17提问于2019-01-11得票数 5
回答已采纳
我在我的React应用程序中有一个表单，使用formik向导，在几个页面上，我有一个附加字段的模式。每次我在模态中输入一个字段时，它都是重新呈现的，只允许我一次输入一个字母。是否有一种方法可以防止Formik对每个值的更改重新呈现？
下面是我正在经历的一个例子：
浏览 1提问于2020-09-12得票数 0
我只需要一双新的眼睛来看我的代码。所以问题是，我的代码确实有效，并且确实验证了输入到表单中的代码数据。但是，它仅在按下submit按钮两次后才执行此操作。在实验之后，我还不能弄清楚问题是什么。 它似乎确实尝试提交给我首先运行的调用(它是对Airtable的post请求)，在该调用处理该请求之后，它将验证模式。 如果所有字段都还没有填好，我最终会得到一个422处理错误。如果填写完毕，则使用路由器推送下一页(提交)。 所以我想我要做的是在提交之前验证表单字段。有什么想法吗？ interface FormValues {
firstName: string,
email: stri
浏览 25提问于2020-12-12得票数 1
回答已采纳
Formik的文档指出，您可以使用lodash类型的点路径来命名/访问嵌套对象(例如name.firstName)。这也应该适用于它的内置<ErrorMessage/>组件。我正在使用一个React-Typescript教程应用程序，它使用formik作为表单输入，当与后端代码配对时，它似乎在幕后工作得很好，但我确实注意到，提供嵌套对象值的字段不会在UI中抛出任何错误。错误本身将会生成，但<ErrorMessage/>组件似乎并不想呈现。
下面是该应用程序的精简版本。如果在没有有效输入的情况下退出表单域，应该会抛出"Field is Required“错误，但对
浏览 0提问于2020-05-30得票数 1
我想在表单挂载时显示字段错误。在屈服之后不会。
是的：
const validation = Yup.object().shape({
field: Yup.string().required('Required')
});
福米克：
<Formik
initialValues={initialValues}
validationSchema={validation}
validateOnMount
>
...
</Formik>
谢谢你帮忙！
浏览 12提问于2020-05-19得票数 9
回答已采纳
1回答
在下面的StackBlitz中，我有一个非常简单的表单验证。验证是在用户单击submit按钮时完成的。
import { ErrorMessage, Field, Form, Formik } from 'formik';
import React from 'react';
import * as Yup from 'yup';
export default () => {
return (
<Formik
initialValues={{
email: '',
浏览 11提问于2022-03-20得票数 1
2回答
我正在从api中捕获错误，并在表单中显示它们，这工作得很好。但问题是，当我在表单中更改一个字段时，所有错误都会消失。对于表单，我使用Formik，对于验证，我使用Yup。 const handleSubmit = (values, {setSubmitting, setFieldError, setStatus}) => {
someApiCall(values)
.then(
() => {
},
(error) => {
// exampl
浏览 25提问于2019-06-28得票数 7
回答已采纳
我是新的反应，我试图让特定的图标显示在输入字段的末尾，这取决于Formik / Yup验证。因此，如果我的验证失败了，我希望在字段的末尾显示一个红十字会图标，如果验证成功，则需要一个滴答图标。只有验证一次，图标才会显示出来。
这是我当前的登录表单组件：
import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
const LoginForm = () => (
<Formik
浏览 1提问于2021-02-12得票数 1
回答已采纳
我正在编写一个React应用程序，并使用Formik和Yup作为表单。我遇到问题的页面是一个向导样式的页面，它在页面加载时呈现Form1，上面有一个“下一步”按钮。按下"Next“将呈现Form2，并随Form2一起出现"Back”和"Next“按钮，它们将引导您完成向导。
问题是使用后退按钮。在我填写完Form1后，“下一步”按钮变为启用状态，我可以转到下一个表单。当我使用Form2时，我希望能够返回到Form1并按下“后退”按钮。当Formik被重新呈现时，它会正确地将值加载到表单中，但是它不会验证表单，因此"Next“按钮被禁用，即使数据是有效的。我必须在
浏览 6提问于2020-05-09得票数 6
2回答
我是使用Formik的反应形式与材料用户界面。我有两个字段，我需要计算这两个字段的值变化，所以我必须得到这两个字段的值，
const formik = useFormik({
initialValues: {
quantity: '',
price: '',
total: '',
},
validationSchema: Yup.object({
quantity: Yup.string().ma
浏览 10提问于2022-01-06得票数 0
回答已采纳
此时此刻，我正在尝试构建一个用户输入表单，用户需要在其中使用React & TypeScript中的Formik输入姓名、电子邮件和密码。 处理输入本身工作得很好，现在我想向输入表单添加验证功能，所以我编写了如下代码。 import { Formik, Form, Field, ErrorMessage } from 'formik';
validate(values: User){
let errors: User;
errors = values
if(!values.password){
errors.password
浏览 10提问于2020-07-07得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
