【发布时间】：2021-09-25 02:57:34
【问题描述】：
我正在使用 Tailwindcss 设置表单样式，但是当我尝试提交并捕获必填字段的错误时，输入字段的大小会增加。
表单代码
<Formik
initialValues={userData.signup}
onSubmit={submitData}
validationSchema={signupSchema}
>
{({ values, errors, touched, handleChange, handleSubmit }) => {
return (
<>
<Form className="grid grid-cols-2 gap-3" onSubmit={handleSubmit} id="form">
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-user-circle"></i>
</span>
<input
className={
`${touched.name && errors.name ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="text"
name="name"
placeholder="Name"
value={values.name}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.name && errors.name}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-envelope"></i>
</span>
<input
className={
`${touched.email && errors.email ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="email"
name="email"
placeholder="Email"
value={values.email}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.email && errors.email}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-phone"></i>
</span>
<input
className={
`${touched.phoneNumber && errors.phoneNumber ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="text"
name="phoneNumber"
placeholder="Phone number"
value={values.phoneNumber}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.phoneNumber && errors.phoneNumber}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-lock"></i>
</span>
<input
className={
`${touched.password && errors.password ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="password"
name="password"
placeholder="Password"
value={values.password}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.password && errors.password}</span>
</div>
{/* <div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-lock"></i>
</span>
<input
className={
`${touched.confirmPassword && errors.confirmPassword ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="password"
name="confirmPassword"
placeholder="Confirm Password"
value={values.confirmPassword}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.confirmPassword && errors.confirmPassword}</span>
</div> */}
</Form>
<SignupBtn type="submit" form="form"> Sign Up </SignupBtn>
<SocialBtns />
</>
)
}}
</Formik>
使用 Formik 突出显示错误后的表单
这是我用来设置表单样式的代码。
我在这里遗漏了什么吗？谢谢
【问题讨论】：
-
您可以添加用于设置表单样式的代码吗？错误消息可能与字段位于同一网格块中，因此会占用空间并强制字段缩小。
-
我已经编辑了问题@baptiste0928
-
请接受其他人知道问题已解决的答案
标签： css tailwind-css