正文 

当前位置： 首页 > 知识 >

React Formik - 仅在表单提交时触发验证

     2023-02-21     103

关键词：

【中文标题】React Formik - 仅在表单提交时触发验证【英文标题】：React Formik - Trigger validation only on form submit 【发布时间】：2019-11-06 14:28:45 【问题描述】：

我在我的 React Native 应用程序中使用 Formik。在登录表单上，我有两个字段：电子邮件和密码，它们都是必需的。

我写过这样的验证规则：

export const LoginSchema = Yup.object().shape(
  email: Yup.string()
    .email('The email is invalid')
    .required('This field is required'),
  password: Yup.string()
    .min(6, 'The password is too short')
    .max(12, 'The password is too long')
    .required('This field is required'),
);

我只需要在表单提交时触发验证并显示错误弹出窗口。我已阅读文档，但找不到解决方案，因为验证会触发 onBlur。如何做到这一点？

谢谢！

const Login = ( navigation ) => 
  const [isLoading, setIsLoading] = useState(true);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => 
    // Later check for token
    const tokenIsStored = true;

    if (tokenIsStored) 
      setIsLoading(false);
    
  );

  const onLogin = values => 
    console.log(values, 'on login');

    // Pass value to BE endpoint
    navigation.navigate('Dashboard');
  ;

  const onModalClose = () => 
    setIsVisible(false);
  ;

  console.log(isVisible);

  if (!isLoading) 
    return (
      <ScrollContainer keyboardShouldPersistTaps="handled">
        <ThemedStatusBar />

        <ThemedModal
          isVisible=isVisible
          primaryMessage="Log In Failed"
          secondaryMessage="Please check your password"
          btnTitle="OK"
          btnPress=() => onModalClose()
        />

        <Formik
          initialValues= email: '', password: '' 
          validationSchema=LoginSchema
          onSubmit=values => onLogin(values)
        >
          props => (
            <View>
              <ScrollContainer BackgroundColor=Colors.greyColor Padding="0px" style=styles.loginForm>
                <ThemedInput
                  onChangeText=props.handleChange('email')
                  onBlur=props.handleBlur('email')
                  value=props.values.email
                  placeholder="Email"
                  keyboardType="email-address"
                />
                <ThemedInput
                  onChangeText=props.handleChange('password')
                  onBlur=props.handleBlur('password')
                  value=props.values.password
                  placeholder="Password"
                  overrideStyles=styles.loginInputBottom
                  secureTextEntry
                />
                props.errors.email && setIsVisible(true)
              </ScrollContainer>
              <ThemedButton onPress=props.handleSubmit title="Log In" />
            </View>
          )
        </Formik>
      </ScrollContainer>
    );
  
  return <ThemedLoader isLoading />;
;

export default Login;

【问题讨论】：

【参考方案1】：

查看docs

您可以根据需要通过更改 &lt;Formik validateOnChange&gt; 和/或 &lt;Formik validateOnBlur&gt; 属性的值来控制 Formik 何时运行验证。默认情况下，Formik 会运行如下验证方法：

将道具validateOnChange=false 和validateOnBlur=false 传递给您的Formik

【讨论】：

v1 也一样吗？ @NaveenVignesh 是的【参考方案2】：

是的。你可以这样做。

<Formik
        initialValues=initialValues
        validationSchema=validationSchema
        validateOnChange=false
        validateOnBlur=false
        onSubmit=(values,  validate ) => 
            validate(values);
        
    >

【讨论】：

【参考方案3】：

如果你使用 useFormik 钩子，应该添加下一个配置

  const formik = useFormik(
    initialValues,
    validationSchema,
    validateOnChange: false, // this one
    validateOnBlur: false, // and this one
    onSubmit: (values) => 
     do something on submit
    ,
  );

【讨论】：

React 故事书显示有错误的 formik 表单

】React故事书显示有错误的formik表单【英文标题】：Reactstorybookshowingformikformwitherrors【发布时间】：2019-07-1223:18:47【问题描述】：强制formik表单显示错误字段的最简单方法是什么？我想要一个react故事书来展示当一个字段中有错误... 查看详情

React JS：Yup & Formik 错误消息在提交时显示多次

】ReactJS：Yup&Formik错误消息在提交时显示多次【英文标题】：ReactJS:Yup&FormikErrorMessageshowingmultipletimesonSubmit【发布时间】：2021-04-2516:11:13【问题描述】：我正在使用Yup和Formik作为我的注册表单。我想根据我使用YUP的验证显示... 查看详情

在 React 中提交表单时渲染数据

...我有一个表单组件，我正在尝试渲染另一个组件，该组件仅在提交时从表单传递道具。截至目前，组件在handleChange上重新渲染，但不等待handleSubmit。classUserInf 查看详情

如何使用formik react js在handlesubmit函数中接收选择值？

】如何使用formikreactjs在handlesubmit函数中接收选择值？【英文标题】：Howtoreceiveselectvalueinhandlesubmitfunctionwithformikreactjs?【发布时间】：2018-10-2421:59:29【问题描述】：我正在使用formik插件pluginlink在reactjs中开发一个表单。当我提交表... 查看详情

如何使用useFormik在输入时禁用表单提交？

】如何使用useFormik在输入时禁用表单提交？【英文标题】：HowtodisableformsubmitonenterwithuseFormik?【发布时间】：2022-01-1122:17:59【问题描述】：我正在使用React、Typescript和Formik构建一个表单。该表单具有三个输入。当用户在输入字段... 查看详情

防止提交路线更改 Formik AutoSave

】防止提交路线更改FormikAutoSave【英文标题】：PreventsubmitonroutechangeFormikAutoSave【发布时间】：2020-04-0416:33:25【问题描述】：我的应用程序的表单带有&lt;AutoSave/&gt;组件。一旦表单值改变，这个组件就会调用提交。一切正常... 查看详情

jQuery - 更改 iframe src 时仅在第二次单击时触发

】jQuery-更改iframesrc时仅在第二次单击时触发【英文标题】：jQuery-onlyfiresonsecondclickwhenchangingiframesrc【发布时间】：2011-01-0522:57:47【问题描述】：我正在尝试在提交表单时更改iframe的src。除非我点击提交按钮两次，否则iframesrc不会... 查看详情

[react]你有使用过formik库吗？说说它的优缺点

[react]你有使用过formik库吗？说说它的优缺点Formik提供了便捷的表单操作，如获取表单数据，表单校验，提交事件等结合yup来设置表单校验规则非常方便Formikisasmalllibrarythathelpsyouwiththe3mostannoyingparts:Gettingvaluesinandouto... 查看详情

Formik + Yup：如何在提交前立即验证表单？

】Formik+Yup：如何在提交前立即验证表单？【英文标题】：Formik+Yup:Howtoimmediatelyvalidateformbeforesubmit?【发布时间】：2020-09-0500:47:41【问题描述】：我想在安装表单时显示字段错误。不是在提交之后。是的：constvalidation=Yup.object().shape... 查看详情

如何在 react-apollo-hooks 和 formik 中使用突变？

】如何在react-apollo-hooks和formik中使用突变？【英文标题】：Howtousemutationsinreact-apollo-hooksandformik?【发布时间】：2019-11-2806:49:36【问题描述】：在我的许多尝试中，我尝试过将react-apollo-hooks和formik一起使用，但这似乎是不可能的。... 查看详情

让 React 表单使用 Formik 发送电子邮件

】让React表单使用Formik发送电子邮件【英文标题】：HaveReactformsendanemailusingFormik【发布时间】：2021-04-2614:13:39【问题描述】：我正在尝试使用Formik创建的表单，Yup向我发送了一封电子邮件“onSubmit”，但我不确定需要在“onSubmit”... 查看详情

在 formik 组件之外处理 formik 表单

】在formik组件之外处理formik表单【英文标题】：Handleformikformoutsideofformikcomponent【发布时间】：2019-12-2613:58:12【问题描述】：我有一个formik表单，如下所示。我可以在formik组件中提交表单。但是我怎么能在formik组件之外提交它（... 查看详情

使用带有formik的react-select时无法读取未定义的属性“类型”

】使用带有formik的react-select时无法读取未定义的属性“类型”【英文标题】：Cannotreadproperty\'type\'ofundefinedwhileusingreact-selectwithformik【发布时间】：2019-01-0206:35:51【问题描述】：我正在使用react-select和formik构建一个带有自动填充文... 查看详情

仅在选中复选框时提交表单

】仅在选中复选框时提交表单【英文标题】：Submitformonlyifacheckboxischecked【发布时间】：2021-09-2203:47:26【问题描述】：我正在尝试使用javascript提交表单，我需要在验证复选框时在几秒钟内自动发送表单。<formmethod="POST"action="route... 查看详情

具有 React-Datepicker 问题的 Formik 字段

】具有React-Datepicker问题的Formik字段【英文标题】：FormikFieldwithReact-Datepickerissue【发布时间】：2021-11-1023:11:22【问题描述】：我正在使用Formik及其Field组件为动态表单创建可重用字段。我在尝试使用Field组件实现React-Datepicker时遇到... 查看详情

使用 Formik 的 React-Native 选择器

】使用Formik的React-Native选择器【英文标题】：React-NativePickerwithFormik【发布时间】：2017-12-2415:00:12【问题描述】：我的基本表单工作正常，但是，由于react-native有一些警告，我可以使用一些帮助来了解问题是我如何使用formik，还... 查看详情

当我提交表单并尝试更改值时，Formik + Material UI 错误

】当我提交表单并尝试更改值时，Formik+MaterialUI错误【英文标题】：Formik+MaterialUIbugwhenisubmitformandtrytochangethevalues【发布时间】：2022-01-1222:40:45【问题描述】：我有这个formik代码，我有一个handleSubmit来获取值并更改其他数据的值：... 查看详情

jQuery 验证仅在第二次提交时触发

】jQuery验证仅在第二次提交时触发【英文标题】：jQueryvalidateonlygettriggeredonthesecondsubmit【发布时间】：2021-04-2907:49:39【问题描述】：我在javascript中有jquery验证函数，它将被reactjs函数调用。反应JSfunctionhandleFormSubmit(e)e.preventDefault()... 查看详情