reactjs 发生验证错误时处理formik表单

omqzjyyz 于 2022-12-03 发布在 React

关注(0)|答案(6)|浏览(229)

我有一个formik形式在React Native代码如下。完整的可运行的链接可以查看：here

当前行为：

只能使用handleSubmit进行验证，不能用于处理进一步操作请注意，如果handleSubmit检测到任何验证错误，则不会触发onSubmit

<Button onPress={handleSubmit} style={styles.button}>
     Submit
 </Button>

预期解决方案：

尝试提交后验证失败时调用的生命周期事件（例如：onValidationError），其中我可以访问所有输入确认错误道具以用于进一步的动作。
例如：我想处理一些事情（如在验证失败时弹出警报或滚动到第一条错误消息）
代码应该是像follow这样的，或者任何其他的方法都可以接受。只要我能处理验证错误发生时的事件。

<Formik
    onSubmit={values => {
       alert(JSON.stringify(values, null, 2));
       Keyboard.dismiss();
    }}
    onValidationError={errorValues => {
       // any action here
       // note that onValidationError is not a built in function
       // but it would be best if it can be achieved this way
       // else any other equivalent solution also can be accepted
    }}
    validationSchema={validationSchema}>

"尝试过什么"
我试过在这里集成2个解决方案。但没能让它工作。
https://github.com/jaredpalmer/formik/issues/1019
https://github.com/jaredpalmer/formik/issues/1484

reactjs

来源：https://stackoverflow.com/questions/59497550/handling-formik-form-when-validation-error-occurs

6条答案

按热度按时间

r1zk6ea11#

您可以在<form>的onsubmit事件上使用isValid prop（来自<Formik>的渲染prop），方法是绕过此处的逻辑，如（文档）

<form
  onSubmit={e => {
    console.log("isValid", isValid);
    isValid
      ? handleSubmit(e)
      : alert("Handle your custom method instead here");
  }}
>

您可以从formik的render props中访问isValid prop

{props => {
    const {
      values,
      touched,
      errors,
      dirty,
      isSubmitting,
      handleChange,
      handleBlur,
      handleSubmit,
      handleReset,
      isValid // add this to your code
    } = props;
    return ( ... your code );
}}

我也做了代码和框，你可以在这里查看工作示例-https://codesandbox.io/s/trusting-jennings-7wq0f

注意：在formik存储库或任何地方的任何问题上都没有正式提到这一点，但这是在<form>的onsubmit事件上截取submit操作的自定义方式

希望这对你有帮助！

赞(0）回复(0）举报 2022-12-03

lfapxunr2#

有非常简单方法可以做到这一点。
在你的提交按钮onClick方法上，你可以像这样定义一个方法;

<button onClick={() => scrollToErrors(errors)} > //errors param is formik's errors param.

https://formik.org/docs/guides/validation#validationschema

const scrollToErrors = (errors) => {
    const errorKeys = Object.keys(errors);
    if (errorKeys.length > 0) {
      document.getElementsByName(errorKeys[0])[0].focus();
    }  
 }

赞(0）回复(0）举报 2022-12-03

vlurs2pr3#

通过使用useFormikContext的自定义组件可以实现在表单提交失败时显示通知：

import { useFormikContext } from 'formik'
import { useEffect } from 'react'

const FormErrorNotification = () => {
    const { isValid, isValidating, isSubmitting } = useFormikContext()

    useEffect(() => {
        if (!isValid && !isValidating && isSubmitting) {
            alert('Fix your form errors!')
        }
    }, [isSubmitting, isValid, isValidating])

    return null
}

export default FormErrorNotification

并这样使用它：

<Formik ...>
    <FormErrorNotification />
    ...
</Formik>

赞(0）回复(0）举报 2022-12-03

eblbsuwk4#

您可以使用validate方法来完成此操作。只需确保返回error对象，以便表单可以处理验证。

<Formik
    onSubmit={async values => {
      console.log('submit', values)
    }}
    validate={values => {
      const errors = {}
     
      // Check the values object, and add custom validation 

      return errors
    }}
  ></Formik>

赞(0）回复(0）举报 2022-12-03

nwsw7zdq5#

如果您没有使用<Formik>组件，而是使用了reactstrap库中带有useFormik挂钩的<Form>之类的组件，则可以在调用formik的handleSubmit事件时检查它，如下所示
第一个

赞(0）回复(0）举报 2022-12-03

pdkcd3nj6#

我想上面的答案可以解决你的问题，最近我用react hook forms库创建了一些表单（也有一些复杂的表单）。这比formik和redux表单好。我建议你试一次，它很容易即插即用，有很多动态特性和验证（包括模式）。https://react-hook-form.com/

赞(0）回复(0）举报 2022-12-03