#reactjs #forms #validation #react-final-form
#reactjs #формы #проверка #react-final-form
Вопрос:
Я использую react-final-form с fonk. Моя проблема в том, что пользователь может отправить форму без установленного флажка — это происходит, когда вы устанавливаете флажок, а затем снимаете его. Я не знаю почему, но тогда он не показывает никаких ошибок и дает зеленый свет для отправки формы.
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 amp;amp; meta.touched amp;amp; <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 amp;amp; meta.touched amp;amp; <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 amp;amp; meta.touched amp;amp; <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 amp;amp; meta.touched amp;amp; <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 amp;amp; meta.touched amp;amp; <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>
)
И моя проверка формы такова
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';
Комментарии:
1. пожалуйста, разместите код здесь вместо ссылки. также отправьте код в свою функцию проверки FormValidation.validateForm(значения). Проблема заключается здесь.
2. Я предполагаю, что createFinalFormValidation проверяет только неопределенный. когда вы устанавливаете флажок, а затем снимаете флажок, значение устанавливается как false. поскольку значение false не равно undefined, вам разрешено продолжить.
Ответ №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]
},
};
Комментарии:
1. это уже сделано. вы отметили это как ответ.
Ответ №2:
Рассмотрите возможность использования валидатора fonk-is-true-validator. (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
}