未选中复选框时，React-Final-Form 不会重新运行验证

Question

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

        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';

Answer 1

由于上述评论中提到的原因，您需要为 checkobx 创建一个自定义验证器。

export const checkboxValidator = ({ values }) => {
  const succeeded = values.policy;

  return {
    succeeded,
    message: succeeded
      ? ''
      : 'Required',
    type: 'POLICY',
  };
};

将其导入 FormValidation.js

更改您的验证架构。从字段属性中删除策略并将其添加到记录属性.

  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-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
}

未选中复选框时，React-Final-Form 不会重新运行验证

React-Final-Form not reruning the validation when checkbox is unchecked

reactjs

forms

validation

react-final-form