单击提交时，Formik不显示错误消息。直到那时

Question

我将YUP用作我的Formik表单的验证模式。 YUP对象的验证效果很好（例如，当我单击字段并将其留为空时，或者将名字命名为许多字母时。它总是显示错误消息）。 但是，当我单击“提交”按钮时，所有内容都没有显示任何错误消息。这里怎么了？ 我还看过其他帖子，但发现这个问题一无所获。 以下是我表格的代码：

.....
  return (
      <Formik
        enableReinitialize={true}
        initialValues={
        initialValues 
        }
       validationSchema={validationSchema}
        onSubmit={onSubmit}
        >
        {formik => {
                                  
         return (
          <Form
           name="checkout_address"
           id="checkout_address"
className="cham-form"
         >
    

        {mode === "register" && 
        <>
       <h3>{translations['custom.shippingDetail.header']} </h3>
                                         
     {renderFormHeadline()}
        </>
      }

   <h4>{translations['custom.shippingDetail.text']} </h4>
   <div className="container-fluid versandinformationen">
  <div className="row">
       <div className="col-12 col-md-6">                                         
        <SalutationField
          formik={formik}
          translations={translations}
          salutations={salutations}
          state={initialValues}
          changeHandler={e => {
         formik.handleChange(e)                                     
         formik.setFieldValue(
        'salutation',                                                          
        handleSalutations(e.currentTarget.value,salutations)
       )}
       }
     />                                                        
                                               
   </div>
   <div className="col-12 col-md-6">
    <label htmlFor="title">{translations['account.personalTitleLabel']}</label>
<div className="select__input select_input--secondary">
<Field 
as="select"
name="title"
className="cham-form"
placeholder="Titel"
>
                                                      
<option value="">{translations['custom.select.text']}</option>
{titles && titles.map((title)=><option value={title} key={uuidv4()}> {title}</option>)}

</Field>
</div>
</div>
<div className="col-12 col-md-6">
<label htmlFor="firstname">{translations['account.personalFirstNameLabel']}
</label>
<Field 
name="firstname"
className="cham-form"
type="text"
placeholder="Maxi"
 />
<ErrorMessage          
name="firstname"
component="div" 
className="error"
/>
</div>
<div className="col-12 col-md-6">
<label htmlFor="lastname">{translations['account.personalLastNameLabel']}</label>
<Field
 name="lastname"
 className="cham-form"
type="text"
 placeholder="Muster"
 />

 <ErrorMessage
   name="lastname"
   component="div"
   className="error"
  />
  </div>
  </div>
  </div>
                                                                                
  <button type="submit">Submit now</button>

                                                                       
</Form>
 )
  }}
  </Formik>
                                    

   )
 }
.....

我的YUP验证模式如下：

Yup.object({
            salutationId: Yup.string().required(translations['custom.formik.anrede']),
            firstname: Yup.string()
                .matches(nameRegExp,"Bitte geben Sie Ihren Vornamen ein")
                .max(20, translations['custom.formik.anrede.max'])
                .required(translations['custom.formik.mandatory']),
            lastname: Yup.string()
                .matches(nameRegExp,"Bitte geben Sie Ihren Nachnamen ein")
                .max(20, translations['custom.formik.nachname'])
                .required(translations['custom.formik.mandatory'])
        })

非常感谢

Answer 1

嗨，我希望这还为时已晚。

从文档中，他们说“ ...它都希望所有错误消息都存储在给定的字段中...”

您的一些错误消息数组

。要求（translations ['custom.formik.mandatory']），

我认为这是导致问题的原因

，我希望这对您有所帮助。