Formik搭配Chakra-UI实现的表单无法触发提交的问题求助

表单提交不触发问题排查 #

从给出的代码可以定位到以下导致提交无响应的问题，核心原因是Formik验证不通过拦截了提交，且错误提示配置错误导致不可见：

• phone字段配置错误：该字段绑定的验证函数为validateEmail，手机号无法通过邮箱格式校验，始终触发验证失败；同时该字段的渲染回调没有给Input绑定{...field}属性，Formik无法同步字段状态，且未配置错误提示，你无法看到该字段的报错
• 重复校验字段的错误绑定错误：rucAgain、passwordAgain字段的isInvalid判断、错误提示都错误绑定了对应原字段（ruc、password）的错误信息，如果你配置了两次输入一致的校验规则，校验失败后你看不到对应错误
• 协议勾选框未纳入Formik管理：「同意条款」复选框没有通过绑定到Formik，也未加入initialValues，如果你配置了表单级校验要求必须勾选，也会触发验证拦截
• 组件导入检查：确认你是否正确从formik包中导入Form组件并命名为FormikForm，如果导入错误，原生submit事件不会被Formik捕获，也不会触发onSubmit回调

你可以先给Formik组件添加debug属性，提交时控制台会打印所有表单状态、错误信息，即可快速定位具体的拦截原因。

内容的提问来源于stack exchange，提问作者Julio Delgado