当复选框未选中时，React Final Form不会重新调整验证

Question

我正在使用带有fonk的react最终形式。我的问题是，用户可以在不选中复选框的情况下提交表单-当你选中是然后取消选中它时就会发生这种情况。我不知道为什么，但它不会显示任何错误，并为提交表单开了绿灯。

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="[e-mail]"/>
{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';

Answer 1

由于上面注释中提到的原因，您需要为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]
},
};

Answer 2

考虑使用fonk是真正的验证器验证器。(https://github.com/Lemoncode/fonk-is-true-validator)

安装

yarn add fonk-is-true-validator

或

npm install fonk-is-true-validator --save

然后，导入

import { isTrue } from '@lemoncode/fonk-is-true-validator';

并且，添加到架构

field: {
policy: [Validators.required.validator, isTrue.validator],
//....other fields
}