reactjs - 未选中复选框时,React-Final-Form 不会重新运行验证
问题描述
我正在使用带有 fonk 的 react-final-form。我的问题是用户可以在不选中复选框的情况下提交表单 - 当您选中 is 然后取消选中它时会发生这种情况。我不知道为什么,但它没有显示任何错误,并且它为提交表单提供了绿灯。
return (
<MessageFormSection>
<h2>Wypełnij formularz</h2>
<small>Odpowiadamy naprawdę szybko!</small>
<Form
onSubmit={() => {
emailjs.sendForm('service_xuu4z8k', 'template_54zt0z9', '#contact-form', 'user_C1OXTe9qBeqb5ZOmCejLc')
.then((result) => {
setUserInfo('Twoja wiadomośc została wysłana poprawnie');
disableSubmit();
}, (error) => {
setUserInfo('Podczas wysyłania twojej wiadomości pojawił się błąd - Wiadomość nie została wysłana.');
});
}}
initialValues={{
fullName: '',
email: '',
title: '',
message: '',
policy: null,
}}
validate={(values) => formValidation.validateForm(values)}
render={({handleSubmit}) => (
<form onSubmit={handleSubmit} id="contact-form">
<Field name="fullName">
{({input, meta}) => (
<div className="fullname-box">
<label htmlFor="form-fullname-input">Imię i Nazwisko</label>
<input {...input} id="form-fullname-input" placeholder="Jan Kowalski"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="email" type="email">
{({input, meta}) => (
<div className="email-box">
<label htmlFor="form-phone-input">Email</label>
<input {...input} id="form-phone-input" placeholder="jankowalski@email.com"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="title">
{({input, meta}) => (
<div className="title-box">
<label htmlFor="form-title-input">Tytuł</label>
<input {...input} id="form-title-input" placeholder="Wspólna praca nad nowym projektem!?"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="message">
{({input, meta}) => (
<div className="message-box">
<label htmlFor="form-message-input">Twoja wiadomość</label>
<textarea rows="3" {...input} id="form-message-input" placeholder="Chciałbym z wami współpracować!"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="policy" type="checkbox">
{({input, meta}) => (
<div className="checkbox-box">
<input {...input} id="form-policy-checkbox"/>
<label htmlFor="form-policy-checkbox">Wyrażam zgodę na przetwarzanie moich danych osobowych</label>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<div className="buttons">
<button type="submit" id="submit-btn">Submit</button>
</div>
<span className="user-info">{userInfo}</span>
</form>
)}
/>
</MessageFormSection>
)
我的 FormValidation 是这样的
const validationSchema = {
field: {
fullName: [
{
validator: Validators.required.validator,
message: "Pełne imię i nazwisko jest wymagane."
}
],
email: [
{
validator: Validators.required.validator,
message: "Email jest wymagany."
},
{
validator: Validators.email.validator,
message: "Podaj poprawny adres email."
}
],
title: [
{
validator: Validators.required.validator,
message: "Podaj tytuł swojej wiadomości."
}
],
message: [
{
validator: Validators.required.validator,
message: "Podaj wiadomość jaką chcesz do nas wysłać."
}
],
policy: [
{
validator: Validators.required.validator,
message: "Zgoda jest wymagana do wysłania wiadomości."
}
],
},
};
有了这些进口
import { createFinalFormValidation } from `@lemoncode/fonk-final-form`
import { Validators } from '@lemoncode/fonk';
解决方案
由于上述评论中提到的原因,您需要为 checkobx 创建一个自定义验证器。
export const checkboxValidator = ({ values }) => {
const succeeded = values.policy;
return {
succeeded,
message: succeeded
? ''
: 'Required',
type: 'POLICY',
};
};
在 FormValidation.js 中导入它
更改您的验证架构。从 fields 属性中删除策略,然后将其添加到 records 属性中。
const validationSchema = {
field: {
fullName: [
{
validator: Validators.required.validator,
message: "Pełne imię i nazwisko jest wymagane."
}
],
email: [
{
validator: Validators.required.validator,
message: "Email jest wymagany."
},
{
validator: Validators.email.validator,
message: "Podaj poprawny adres email."
}
],
title: [
{
validator: Validators.required.validator,
message: "Podaj tytuł swojej wiadomości."
}
],
message: [
{
validator: Validators.required.validator,
message: "Podaj wiadomość jaką chcesz do nas wysłać."
}
],
},
record: {
policy: [checkboxValidator]
},
};
推荐阅读
- javascript - 如何在ajax成功函数中访问php返回json编码的数组元素
- linux - Linux shell:在每个文件夹中创建文件的循环
- ruby - 将 LDAP DN 字符串解析为 ruby 中的键值对
- javascript - 我可以使用“lodash”库“调用”方法来调用异步函数吗?
- node.js - 具有相对路径的 AWS Lambda 访问文件
- symfony4 - 将 symfony 环境值设置为路径
- angularjs - arrayList中的角度js ng-repeat
- javascript - 使用观察位置功能实时移动谷歌地图标记
- azure - Azure 流分析 GetMetadataPropertyValue 不起作用
- javascript - d3.js条形图中具有恒定条形宽度的动态数据