web-dev-qa-db-fra.com

Validation conditionnelle en Yup

J'ai un champ d'e-mail qui ne s'affiche que si une case est cochée (la valeur booléenne est true). Lorsque le formulaire est soumis, je ne précise que ce que ce champ doit être renseigné si la case à cocher est cochée (la valeur booléenne est vraie).

C'est ce que j'ai essayé jusqu'à présent:

    const validationSchema = yup.object().shape({
       email: yup
             .string()
             .email()
             .label('Email')
             .when('showEmail', {
                 is: true,
                 then: yup.string().required('Must enter email address'),
             }),
        })

J'ai essayé plusieurs autres variantes, mais j'ai des erreurs de Formik et Yup:

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.es6.js:6198) at formik.es6.js:5933 at <anonymous> yupToFormErrors @ formik.es6.js:6198

Et je reçois aussi des erreurs de validation. Qu'est-ce que je fais mal?

javascriptreactjsyupformik
18
reectrix

Vous ne définissez probablement pas de règle de validation pour le champ showEmail .

J'ai fait un CodeSandox pour le tester et dès que j'ai ajouté:

showEmail: yup.boolean()

Le formulaire a démarré la validation correctement et aucune erreur n'a été générée.

Ceci est l'URL: https://codesandbox.io/s/74z4px0k8q

Et pour l’avenir, c’était le bon schéma de validation:

validationSchema={yup.object().shape({
    showEmail: yup.boolean(),
    email: yup
      .string()
      .email()
      .when("showEmail", {
        is: true,
        then: yup.string().required("Must enter email address")
      })
  })
}
28
João Cunha

Totalement d'accord avec la réponse de @ João Cunha. Juste un supplément pour le cas d'utilisation du bouton radio.

Lorsque nous utilisons le bouton radio comme condition, nous pouvons vérifier la valeur de la chaîne au lieu de la valeur booléenne. par exemple. is: 'Phone'

const ValidationSchema = Yup.object().shape({
  // This is the radio button.
  preferredContact: Yup.string()
    .required('Preferred contact is required.'),
  // This is the input field.
  contactPhone: Yup.string()
    .when('preferredContact', {
      is: 'Phone',
      then: Yup.string()
        .required('Phone number is required.'),
    }),
  // This is another input field.
  contactEmail: Yup.string()
    .when('preferredContact', {
      is: 'Email',
      then: Yup.string()
        .email('Please use a valid email address.')
        .required('Email address is required.'),
    }),

});

Ce bouton radio écrit dans ReactJS, méthode OnChange, est la clé pour déclencher la vérification des conditions.

<label>
  <input
    name="preferredContact" type="radio" value="Email"
    checked={this.state.preferredContact == 'Email'}
    onChange={() => this.handleRadioButtonChange('Email', setFieldValue)}
  />
  Email
</label>
<label>
  <input
    name="preferredContact" type="radio" value="Phone"
    checked={this.state.preferredContact == 'Phone'}
    onChange={() => this.handleRadioButtonChange('Phone', setFieldValue)}
  />
  Phone
</label>

Et voici la fonction de rappel lorsque le bouton radio est modifié. si nous utilisons Formik, setFieldValue est la voie à suivre.

handleRadioButtonChange(value, setFieldValue) {
  this.setState({'preferredContact': value});
  setFieldValue('preferredContact', value);
}
4
Eric Tan