web-dev-qa-db-fra.com

validation yup sur plusieurs valeurs

Je veux valider mon formulaire en utilisant yup dans formik. Supposons que j'ai 4 champs A, B, C, D et qu'ils soient tous des chaînes. Comment dois-je écrire le schéma de validation si je veux qu'au moins un des champs ne soit pas vide, alors c'est un formulaire valide? Merci d'avance!

formikyup
2
bunny

Lorsque vous utilisez Yup si toutes les fonctionnalités normales vous échouent, vous pouvez utiliser le .test fonctionnalité, documentée ici - https://github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema

mixed.test (nom: chaîne, message: chaîne | fonction, test: fonction): Schéma

Ajoute une fonction de test à la chaîne de validation. Les tests sont exécutés après qu'un objet a été casté. De nombreux types ont des tests intégrés, mais vous pouvez facilement en créer des personnalisés. Afin de permettre des validations personnalisées asynchrones, tous les tests (ou aucun) sont exécutés de manière asynchrone. En conséquence, l'ordre d'exécution des tests ne peut pas être garanti.

Pour votre implémentation, vous voudrez écrire un "test" pour chacun de vos 4 champs pour vous assurer que l'un des 4 n'est pas nul.

field1: yup
    .string()
    .test(
      'oneOfRequired',
      'One of Field1, Field2, Field3 or Field4 must be entered',
      function(item) {
        return (this.parent.filed1 || this.parent.field2 || this.parent.field3 || this.parent.field4)
      }
    ),
field2: yup
    .string()
    .test(
      'oneOfRequired',
      'One of Field1, Field2, Field3 or Field4 must be entered',
      function(item) {
        return (this.parent.filed1 || this.parent.field2 || this.parent.field3 || this.parent.field4)
      }
    ),

etc...

Veuillez noter dans ce cas que je n'ai pas utilisé de fonction de flèche. En effet, pour utiliser le contexte "this", vous devez utiliser cette syntaxe, cela est mentionné dans la documentation Yup.

6
Jamie Shepherd