Bootstrap模态框中Formik表单onSubmit函数无法触发求助

你的问题和Bootstrap模态框无关，核心是表单控件未正确绑定Formik状态，导致验证逻辑看似正常，但实际表单值不符合规则，最终阻止了onSubmit触发。

问题定位 #

看你代码里的LegalConsent复选框：

<input 
    id="legalConsentInput" 
    name="LegalConsent" 
    type="checkbox" 
    onChange={handleChange} 
    data-bs-toggle="tooltip" 
    data-bs-placement="bottom" 
    title={`${ errors.LegalConsent && touched.LegalConsent ? errors.LegalConsent : ""}`} data-bs-custom-class="custom-tooltip" />

这个原生复选框既没绑定checked={values.LegalConsent}，也没加onBlur={handleBlur}。即便你勾选了复选框，Formik的values.LegalConsent仍会保持初始值false，而你的验证规则明确要求它必须为true：

LegalConsent: Yup.bool().oneOf([true], "* Debe aceptar los términos")

点击提交时，Formik执行验证，因values.LegalConsent为false导致验证不通过，但又因touched状态未触发（缺少onBlur），错误提示没正确显示，让你误以为验证已通过。

修复方案 #

有两种方式修复复选框的绑定：

方式1：使用Formik的Field组件（推荐）

替换原生input为Formik的Field组件，它会自动处理checked、onChange和onBlur：

<Field 
    id="legalConsentInput" 
    name="LegalConsent" 
    type="checkbox" 
    data-bs-toggle="tooltip" 
    data-bs-placement="bottom" 
    title={`${ errors.LegalConsent && touched.LegalConsent ? errors.LegalConsent : ""}`} 
    data-bs-custom-class="custom-tooltip" 
/>

方式2：完善原生input的绑定

如果坚持用原生input，需手动绑定checked和onBlur：

<input 
    id="legalConsentInput" 
    name="LegalConsent" 
    type="checkbox" 
    checked={values.LegalConsent}
    onChange={handleChange} 
    onBlur={handleBlur}
    data-bs-toggle="tooltip" 
    data-bs-placement="bottom" 
    title={`${ errors.LegalConsent && touched.LegalConsent ? errors.LegalConsent : ""}`} 
    data-bs-custom-class="custom-tooltip" 
/>

额外优化 #

你的Comment文本框用的是原生textarea，虽已绑定必要属性，但也可换成Formik的Field组件简化代码：

<Field 
    id="commentInput" 
    name="Comment"
    as="textarea"
    className="form-group__input" 
    rows="5"
/>

这样无需手动绑定value、onChange和onBlur。

修改完成后重新测试，handleSubmitContactModal内的断点就能正常触发了。

内容的提问来源于stack exchange，提问作者Rafael AC