yup 验证输入时更改 css答案

【问题标题】：Change css when yup validate inputyup 验证输入时更改 css
【发布时间】：2022-07-20 17:19:17
【问题描述】：

我有这个带有 Yup 验证的 Formik 表单：

<Form>

   <div className="mt-3">
      <label className="font-semibold">Nom</label>
      <Field className={`mt-2 rounded-md w-full py-2 px-3 ${errors.lastname ? 'border-2 border-red-500 error-form error-form' : 'border'}`}
             name="lastname"
             type="text"
             placeholder="Votre nom"
             />
       {errors.lastname &&
           <div className="text-red-500 text-sm">{errors.lastname}</div>}

       [...]
    </div>

我在提交之前禁用了验证（因为我不希望访问者在填写之前就对每个输入感到震惊：

validateOnChange={false}
validateOnBlur={false}

一切正常。但是现在我想在输入上设置一个绿色边框（当我点击提交按钮时）到适合 Yup 的字段。

出错时我已经用红色边框做了。

我尝试了className={`mt-2 rounded-md w-full py-2 px-3 ${errors.message ? 'border-2 border-red-500 error-form' : 'border'} ${!errors.lastname ? 'border-2 border-green-500' : ''}`}，但这甚至在提交之前就将我的所有字段设置为绿色边框。

有什么想法吗？

【问题讨论】：

标签： css tailwind-css formik yup

【解决方案1】：

是的，它会在您提交表单之前应用，因为您只是在检查它是否有错误。显然一开始，由于没有错误，所有的边框都会被涂成绿色。

在提交按钮点击时有条件地应用相同的代码，它会起作用。

或者为了让事情更干净，你可以在提交点击时动态添加一个像 form_submitted 的类，然后使用下面的 CSS

.form_submitted  input {
   border-color: green;
}

.form_submitted  input.error {
   border-color: red;
}

【讨论】：