From ff724b7f771a6ece68f295de3b881a1c463497a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Le=20Moigne?= Date: Mon, 22 Oct 2018 19:31:26 +0200 Subject: [PATCH 01/11] Proposition de traduction de la page form-validation --- src/v2/cookbook/form-validation.md | 53 +++++++++++++++--------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 2811569c56..63993815ae 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -4,11 +4,12 @@ type: cookbook order: 3 --- -## Base Example +## Exemple de base -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let's begin with a simple example.

+

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

+La validation des formulaires est supportée nativement par le navigateur. Parfois on va observer des différences sur la manière de gèrer la validation en fonction des navigateurs ce qui fait que se reposer sur cette validation supportée nativement est des plus délicat. Même quand la validation est supportée parfaitement, il se peut que quand des validations personnalisées ou plus "manuelles" sont nécessaires, les solutions basées sur Vue soit plus appropriées. Commencons avec un exemple simple.

-Given a form of three fields, make two required. Let's look at the HTML first: +Pour un formulaire avec trois champs, considérons que deux sont obligatoires. Regardons le HTML d'abord: ``` html
``` -Let's cover it from the top. The `` tag has an ID that we'll be using for the Vue component. There's a submit handler that you'll see in a bit, and the `action` is a temporary URL that would point to something real on a server someplace (where you have backup server-side validation of course). +Analysons cela à partir en partant du haut. La balise `` a un id que nous utiliserons pour le composant Vue. Il y a un gestionnaire d'évenement à la soumission du formulaire que vous verrez dans un momment, et l'attribut `action` correspond a une URL temporaire qui devrait pointer vers quelquechose de réel sur un serveur (sur lequel vous avez une validation côté serveur bien entendu). -Beneath that there is a paragraph that shows or hides itself based on an error state. This will render a simple list of errors on top of the form. Also note we fire the validation on submit rather than as every field is modified. +En dessous il y a un paragraphe qui s'affiche ou non en fonction de la présence d'erreurs. C'est une simple liste d'erreurs au-dessus du formulaire. Notez aussi que l'on déclenche la validation à la soumission du formulaire plutôt qu'a la modification de chaque champ. -The final thing to note is that each of the three fields has a corresponding `v-model` to connect them to values we will work with in the JavaScript. Now let's look at that. +La dernière chose à remarquer est que chacun des trois champs possède un `v-model` correspondant afin de les connecter aux valeurs sur lesquelles nous travaillerons en JavaScript. ``` js const app = new Vue({ @@ -104,14 +105,14 @@ const app = new Vue({ }) ``` -Fairly short and simple. We define an array to hold errors and set `null` values for the three form fields. The `checkForm` logic (which is run on submit remember) checks for name and age only as movie is optional. If they are empty we check each and set a specific error for each. And that's really it. You can run the demo below. Don't forget that on a successful submission it's going to POST to a temporary URL. +Relativement court et simple, on définit un tableau pour contenir les erreurs et les valeurs des trois champs du formulaires sont initialisées à `null`. La logique de `checkForm` (qui est activée à la soumission du formulaire) vérifie seulement que name et age ont des valeurs puisque movie est optionnel. Si ce n'est pas le cas, on vérifie chacune d'elles et on ajoute une erreur spécifique quand elles sont nulles. Et c'est tout. Vous pouvez lancer la demo ci-dessous. N'oubliez pas que pour une soumission réussie, cela va générer une requête POST à une URL temporaire. -

See the Pen form validation 1 by Raymond Camden (@cfjedimaster) on CodePen.

+

Voir le Pen form validation 1 par Raymond Camden (@cfjedimaster) sur CodePen.

-## Using Custom Validation +## Utiliser une validation personnalisée. -For the second example, the second text field (age) was switched to email which will be validated with a bit of custom logic. The code is taken from the StackOverflow question, [How to validate email address in JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript). This is an awesome question because it makes your most intense Facebook political/religious argument look like a slight disagreement over who makes the best beer. Seriously - it's insane. Here is the HTML, even though it's really close to the first example. +Pour le second exemple, le deuxième champ de texte (age) est remplacé par un champ d'email qui sera validé par un peu de logique personnalisée. Le code vient de la question StackOverflow , [Comment valider une adresse email en JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript). C'est une très bonne question puisqu'elle fait passer votre plus intense discussion politique ou religieuse sur Facebook pour un simple désaccord sur qui fait la meilleure bière. Sérieusement, c'est délirant. Voici le HTML, même si il est très proche du premier exemple. ``` html ``` -While the change here is small, note the `novalidate="true"` on top. This is important because the browser will attempt to validate the email address in the field when `type="email"`. Frankly it may make more sense to trust the browser in this case, but as we wanted an example with custom validation, we're disabling it. Here's the updated JavaScript. +Bien qu'il y ait peu de différence, remarquez le `novalidate="true"` au début. C'est important car le navigateur va essayer de valider l'adresse email dans le champ quand `type=email` est spécifié. Honnêtement, il est plus logique de faire confiance au navigateur dans ce cas, mais comme nous voulions un exemple personnalisé de validation, nous le désactivons. Voici le JavaScript mis à jour. ``` js const app = new Vue({ @@ -210,14 +211,14 @@ const app = new Vue({ }) ``` -As you can see, we've added `validEmail` as a new method and it is simply called from `checkForm`. You can play with this example here: +Comme vous pouvez le voir, nous avons ajouté une nouvelle méthode `validEmail` qui est simplement appelée par `checkForm`. Vous pouvez jouer avec l'exemple ici: -

See the Pen form validation 2 by Raymond Camden (@cfjedimaster) on CodePen.

+

Voir le Pen form validation 2 par Raymond Camden (@cfjedimaster) sur CodePen.

-## Another Example of Custom Validation +## Autre exemple de validation personnalisée -For the third example, we've built something you've probably seen in survey apps. The user is asked to spend a "budget" for a set of features for a new Star Destroyer model. The total must equal 100. First, the HTML. +Pour le troisième exemple, nous avons construit quelquechose que vous avez surement déjà vu dans des application de sondage. L'utilisateur se voit demander de dépenser un budget pour un ensemble de propriétés pour un nouveau modèle de Star Destroyer. Le total doit être de 100. Tout d'abord le HTML. ``` html ``` -Note the set of inputs covering the five different features. Note the addition of `.number` to the `v-model` attribute. This tells Vue to cast the value to a number when you use it. However, there is a bug with this feature such that when the value is blank, it turns back into a string. You'll see the workaround below. To make it a bit easier for the user, we also added a current total right below so they can see, in real time, what their total is. Now let's look at the JavaScript. +Notez l'ensemble des champs pour les cinqs propriétés. Remarquez l'ajout de `.number` à la suite de l'attribut `v-model`. Cela dit à Vue de caster la valeur en un nombre quand vous l'utilisé. Il y a cependant un bug avec cette fonctionnalité qui fait que quand la valeur est nulle, cela retourne une chaine de caractère. Vous verrez comment contourner cela plus bas. Pour faciliter la tâche à l'utilisateur, nous avons ajouté le total en cours juste en bas afin qu'ils puissent le visualiser en temps réel. Maintenant regardons le JavaScript. ``` js const app = new Vue({ @@ -323,14 +324,14 @@ const app = new Vue({ }) ``` -We set up the total value as a computed value, and outside of that bug I ran into, it was simple enough to setup. My checkForm method now just needs to see if the total is 100 and that's it. You can play with this here: +Nous avons définit le total comme une valeur calculée et à part le bug que j'ai eu à gèré, ce fut simple à mettre en place. La méthode checkForm doit maintenant just vérifier si le total est 100 et c'est tout. Vous pouvez jouer avec ici: -

See the Pen form validation 3 by Raymond Camden (@cfjedimaster) on CodePen.

+

Voir le Pen form validation 3 par Raymond Camden (@cfjedimaster) sur CodePen.

-## Server-side Validation +## Validation côté serveur -In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [OpenWhisk](http://openwhisk.apache.org/) serverless action to do the validation. While it isn't terribly important, here is the logic: +Dans mon dernier exemple, nous contruisons quelquechose qui utilise Ajax afin de valider via le serveur. Le formulaire va vous demander de nommer un nouveau produit et ensuite s'assurer que ce nom est unique. Nous avons écrit une rapide [OpenWhisk](http://openwhisk.apache.org/) action sans serveur pour gèrer la validation, voici la logique de cette action. ``` js function main(args) { @@ -347,7 +348,7 @@ function main(args) { } ``` -Basically any name but "vista", "empire", and "mbp" are acceptable. Ok, so let's look at the form. +En gros, tous les noms excepté "vista", "empire", and "mbp" sont valides. Bien, regardons donc le formulaire. ``` html ``` -There isn't anything special here. So let's go on to the JavaScript. +Il n'y a rien de bien spécial ici. Voyons maintenant le JavaScript. ``` js const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name='; @@ -419,14 +420,14 @@ const app = new Vue({ }) ``` -We start off with a variable representing the URL of the API that is running on OpenWhisk. Now look at `checkForm`. In this version, we always prevent the form from submitting (which, by the way, could be done in the HTML with Vue as well). You can see a basic check on `this.name` being empty, and then we hit the API. If it's bad, we add an error as before. If it's good, right now we do nothing (just an alert), but you could navigate the user to a new page with the product name in the URL, or do other actions as well. You can run this demo below: +On commence par une variable pour l'URL de l'API qui est exécuté sur OpenWhisk. Maintenant, voyons `checkForm`. Dans cette version, nous empêchons le formulaire d'être soumis (ce qui, par ailleurs, pourrait être fait en HTML par Vue). Vous pouvez voir une vérification basique sur la nullité de `this.name` puis on attaque l'API. Si c'est un mauvais nom, on ajoute une erreur comme précédement. Si c'est bon, dans cet exemple nous ne faisons rien à part une alerte JavaScript, mais vous pouvez renvoyer l'utilisateur vers une nouvelle page avec le nom du produit dans l'URL, ou effectuer d'autres actions. Vous pouvez tester la démo ci-dessous: -

See the Pen form validation 4 by Raymond Camden (@cfjedimaster) on CodePen.

+

Voir le Pen form validation 4 par Raymond Camden (@cfjedimaster) sur CodePen.

-## Alternative Patterns +## Patterns alternatifs -While this cookbook entry focused on doing form validation "by hand", there are, of course, some great Vue libraries that will handle a lot of this for you. Switching to a prepackage library may impact the final size of your application, but the benefits could be tremendous. You have code that is (most likely) heavily tested and also updated on a regular basis. Some examples of form validation libraries for Vue include: +Bien que cette partie se focalise essentiellement sur une validation "manuelle", il y a bien sur, de très bonnes bibliothèques permettant de gèrer cela pour vous. Opter pour une bibliothèque pré-packagée pourrait avoir un impact sur la taille finale de votre application, mais les bénéfices pourraient être énormes. Vous avez à votre disposition du code qui est (très probablement) très bien testé et aussi mis à jour régulièrement. Quelques exemples de bibliothèques de validation pour Vue: * [vuelidate](https://github.com/monterail/vuelidate) * [VeeValidate](http://vee-validate.logaretm.com/) From 59a6704801f799e0d7567d58e3f17b565bb49b9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 8 Nov 2018 18:55:58 +0100 Subject: [PATCH 02/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 63993815ae..25f5b8520a 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -7,7 +7,7 @@ order: 3 ## Exemple de base

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

-La validation des formulaires est supportée nativement par le navigateur. Parfois on va observer des différences sur la manière de gèrer la validation en fonction des navigateurs ce qui fait que se reposer sur cette validation supportée nativement est des plus délicat. Même quand la validation est supportée parfaitement, il se peut que quand des validations personnalisées ou plus "manuelles" sont nécessaires, les solutions basées sur Vue soit plus appropriées. Commencons avec un exemple simple.

+La validation des formulaires est supportée nativement par le navigateur. Parfois on va observer des différences sur la manière de gérer la validation en fonction des navigateurs ce qui fait que se reposer sur cette validation supportée nativement est des plus délicat. Même quand la validation est supportée parfaitement, il se peut que quand des validations personnalisées ou plus "manuelles" sont nécessaires, les solutions basées sur Vue soient plus appropriées. Commençons avec un exemple simple.

Pour un formulaire avec trois champs, considérons que deux sont obligatoires. Regardons le HTML d'abord: From 559664e18b9e00647f27a3d324c6fee46cea2be9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 8 Nov 2018 18:56:54 +0100 Subject: [PATCH 03/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 25f5b8520a..821c77440c 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -69,7 +69,7 @@ Pour un formulaire avec trois champs, considérons que deux sont obligatoires. R ``` -Analysons cela à partir en partant du haut. La balise `
` a un id que nous utiliserons pour le composant Vue. Il y a un gestionnaire d'évenement à la soumission du formulaire que vous verrez dans un momment, et l'attribut `action` correspond a une URL temporaire qui devrait pointer vers quelquechose de réel sur un serveur (sur lequel vous avez une validation côté serveur bien entendu). +Analysons cela à partir en partant du haut. La balise `` a un id que nous utiliserons pour le composant Vue. Il y a un gestionnaire d'évènement à la soumission du formulaire que vous verrez dans un moment, et l'attribut `action` correspond a une URL temporaire qui devrait pointer vers quelque chose de réel sur un serveur (sur lequel vous avez une validation côté serveur bien entendu). En dessous il y a un paragraphe qui s'affiche ou non en fonction de la présence d'erreurs. C'est une simple liste d'erreurs au-dessus du formulaire. Notez aussi que l'on déclenche la validation à la soumission du formulaire plutôt qu'a la modification de chaque champ. From 27be7723e435dc209d69efd37a8c3fbc160add3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 8 Nov 2018 18:57:26 +0100 Subject: [PATCH 04/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 821c77440c..4d90682636 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -105,7 +105,7 @@ const app = new Vue({ }) ``` -Relativement court et simple, on définit un tableau pour contenir les erreurs et les valeurs des trois champs du formulaires sont initialisées à `null`. La logique de `checkForm` (qui est activée à la soumission du formulaire) vérifie seulement que name et age ont des valeurs puisque movie est optionnel. Si ce n'est pas le cas, on vérifie chacune d'elles et on ajoute une erreur spécifique quand elles sont nulles. Et c'est tout. Vous pouvez lancer la demo ci-dessous. N'oubliez pas que pour une soumission réussie, cela va générer une requête POST à une URL temporaire. +Relativement court et simple, on définit un tableau pour contenir les erreurs et les valeurs des trois champs du formulaire sont initialisées à `null`. La logique de `checkForm` (qui est activée à la soumission du formulaire) vérifie seulement que name et age ont des valeurs puisque movie est optionnel. Si ce n'est pas le cas, on vérifie chacune d'elles et on ajoute une erreur spécifique quand elles sont nulles. Et c'est tout. Vous pouvez lancer la démo ci-dessous. N'oubliez pas que pour une soumission réussie, cela va générer une requête POST à une URL temporaire.

Voir le Pen form validation 1 par Raymond Camden (@cfjedimaster) sur CodePen.

From 4f48ed29bd09d81387d52517f5b71d737c653f78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 8 Nov 2018 18:57:51 +0100 Subject: [PATCH 05/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 4d90682636..c7d5aa4d4a 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -218,7 +218,7 @@ Comme vous pouvez le voir, nous avons ajouté une nouvelle méthode `validEmail` ## Autre exemple de validation personnalisée -Pour le troisième exemple, nous avons construit quelquechose que vous avez surement déjà vu dans des application de sondage. L'utilisateur se voit demander de dépenser un budget pour un ensemble de propriétés pour un nouveau modèle de Star Destroyer. Le total doit être de 100. Tout d'abord le HTML. +Pour le troisième exemple, nous avons construit quelque chose que vous avez surement déjà vu dans des applications de sondage. L'utilisateur se voit demander de dépenser un budget pour un ensemble de propriétés pour un nouveau modèle de Star Destroyer. Le total doit être de 100. Tout d'abord le HTML. ``` html Date: Thu, 8 Nov 2018 18:58:30 +0100 Subject: [PATCH 06/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index c7d5aa4d4a..0b1a5ea79d 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -284,7 +284,7 @@ Pour le troisième exemple, nous avons construit quelque chose que vous avez sur ``` -Notez l'ensemble des champs pour les cinqs propriétés. Remarquez l'ajout de `.number` à la suite de l'attribut `v-model`. Cela dit à Vue de caster la valeur en un nombre quand vous l'utilisé. Il y a cependant un bug avec cette fonctionnalité qui fait que quand la valeur est nulle, cela retourne une chaine de caractère. Vous verrez comment contourner cela plus bas. Pour faciliter la tâche à l'utilisateur, nous avons ajouté le total en cours juste en bas afin qu'ils puissent le visualiser en temps réel. Maintenant regardons le JavaScript. +Notez l'ensemble des champs pour les cinq propriétés. Remarquez l'ajout de `.number` à la suite de l'attribut `v-model`. Cela dit à Vue de caster la valeur en un nombre quand vous l'utilisez. Il y a cependant un bug avec cette fonctionnalité qui fait que quand la valeur est nulle, cela retourne une chaine de caractère. Vous verrez comment contourner cela plus bas. Pour faciliter la tâche à l'utilisateur, nous avons ajouté le total en cours juste en bas afin qu'ils puissent le visualiser en temps réel. Maintenant regardons le JavaScript. ``` js const app = new Vue({ From 68255790201e854b31914f2f417e492048957693 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 8 Nov 2018 18:58:50 +0100 Subject: [PATCH 07/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 0b1a5ea79d..9d8a37876f 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -324,7 +324,7 @@ const app = new Vue({ }) ``` -Nous avons définit le total comme une valeur calculée et à part le bug que j'ai eu à gèré, ce fut simple à mettre en place. La méthode checkForm doit maintenant just vérifier si le total est 100 et c'est tout. Vous pouvez jouer avec ici: +Nous avons défini le total comme une valeur calculée et à part le bug que j'ai eu à gérer, ce fut simple à mettre en place. La méthode checkForm doit maintenant juste vérifier si le total est 100 et c'est tout. Vous pouvez jouer avec ici:

Voir le Pen form validation 3 par Raymond Camden (@cfjedimaster) sur CodePen.

From 3b216fe0e0cf787fc6e218d9d48787c37d681b16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Le=20Moigne?= Date: Thu, 8 Nov 2018 19:05:57 +0100 Subject: [PATCH 08/11] Suppression 'simple' et 'juste' --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 9d8a37876f..1fd10810a8 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -324,7 +324,7 @@ const app = new Vue({ }) ``` -Nous avons défini le total comme une valeur calculée et à part le bug que j'ai eu à gérer, ce fut simple à mettre en place. La méthode checkForm doit maintenant juste vérifier si le total est 100 et c'est tout. Vous pouvez jouer avec ici: +Nous avons défini le total comme une valeur calculée et la méthode checkForm doit maintenant juste vérifier si le total est 100 et c'est tout. Vous pouvez jouer avec ici:

Voir le Pen form validation 3 par Raymond Camden (@cfjedimaster) sur CodePen.

From 2303b019ad2380c2c2c921311ac95c9c88978e07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 8 Nov 2018 19:11:29 +0100 Subject: [PATCH 09/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 1fd10810a8..e13b26b1a0 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -420,7 +420,7 @@ const app = new Vue({ }) ``` -On commence par une variable pour l'URL de l'API qui est exécuté sur OpenWhisk. Maintenant, voyons `checkForm`. Dans cette version, nous empêchons le formulaire d'être soumis (ce qui, par ailleurs, pourrait être fait en HTML par Vue). Vous pouvez voir une vérification basique sur la nullité de `this.name` puis on attaque l'API. Si c'est un mauvais nom, on ajoute une erreur comme précédement. Si c'est bon, dans cet exemple nous ne faisons rien à part une alerte JavaScript, mais vous pouvez renvoyer l'utilisateur vers une nouvelle page avec le nom du produit dans l'URL, ou effectuer d'autres actions. Vous pouvez tester la démo ci-dessous: +On commence par une variable pour l'URL de l'API qui est exécuté sur OpenWhisk. Maintenant, voyons `checkForm`. Dans cette version, nous empêchons le formulaire d'être soumis (ce qui, par ailleurs, pourrait être fait en HTML par Vue). Vous pouvez voir une vérification basique sur la nullité de `this.name` puis on attaque l'API. Si c'est un mauvais nom, on ajoute une erreur comme précédemment. Si c'est bon, dans cet exemple nous ne faisons rien à part une alerte JavaScript, mais vous pouvez renvoyer l'utilisateur vers une nouvelle page avec le nom du produit dans l'URL, ou effectuer d'autres actions. Vous pouvez tester la démo ci-dessous:

Voir le Pen form validation 4 par Raymond Camden (@cfjedimaster) sur CodePen.

From 24a39ad39f8afc9d30bde7f4f7de8aff16318b06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 8 Nov 2018 19:12:01 +0100 Subject: [PATCH 10/11] Update src/v2/cookbook/form-validation.md Co-Authored-By: cedlemo --- src/v2/cookbook/form-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index e13b26b1a0..d628df92a0 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -427,7 +427,7 @@ On commence par une variable pour l'URL de l'API qui est exécuté sur OpenWhisk ## Patterns alternatifs -Bien que cette partie se focalise essentiellement sur une validation "manuelle", il y a bien sur, de très bonnes bibliothèques permettant de gèrer cela pour vous. Opter pour une bibliothèque pré-packagée pourrait avoir un impact sur la taille finale de votre application, mais les bénéfices pourraient être énormes. Vous avez à votre disposition du code qui est (très probablement) très bien testé et aussi mis à jour régulièrement. Quelques exemples de bibliothèques de validation pour Vue: +Bien que cette partie se focalise essentiellement sur une validation "manuelle", il y a bien sûr, de très bonnes bibliothèques permettant de gèrer cela pour vous. Opter pour une bibliothèque pré-packagée pourrait avoir un impact sur la taille finale de votre application, mais les bénéfices pourraient être énormes. Vous avez à votre disposition du code qui est (très probablement) très bien testé et aussi mis à jour régulièrement. Quelques exemples de bibliothèques de validation pour Vue: * [vuelidate](https://github.com/monterail/vuelidate) * [VeeValidate](http://vee-validate.logaretm.com/) From f4f86dd29cefae63c2cd601ee54088200baf55c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20Le=20Moigne?= Date: Sat, 1 Dec 2018 17:01:50 +0100 Subject: [PATCH 11/11] form-validation: modification tournure de phrase et correction de fautes --- src/v2/cookbook/form-validation.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 1fd10810a8..695bc7d51a 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -6,7 +6,7 @@ order: 3 ## Exemple de base -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

+

La validation des formulaires est supportée nativement par le navigateur. Parfois on va observer des différences sur la manière de gérer la validation en fonction des navigateurs ce qui fait que se reposer sur cette validation supportée nativement est des plus délicat. Même quand la validation est supportée parfaitement, il se peut que quand des validations personnalisées ou plus "manuelles" sont nécessaires, les solutions basées sur Vue soient plus appropriées. Commençons avec un exemple simple.

Pour un formulaire avec trois champs, considérons que deux sont obligatoires. Regardons le HTML d'abord: @@ -331,7 +331,7 @@ Nous avons défini le total comme une valeur calculée et la méthode checkForm ## Validation côté serveur -Dans mon dernier exemple, nous contruisons quelquechose qui utilise Ajax afin de valider via le serveur. Le formulaire va vous demander de nommer un nouveau produit et ensuite s'assurer que ce nom est unique. Nous avons écrit une rapide [OpenWhisk](http://openwhisk.apache.org/) action sans serveur pour gèrer la validation, voici la logique de cette action. +Dans mon dernier exemple, nous allons construire une application vuejs qui utilise Ajax pour valider des données via le serveur. Le formulaire va vous demander de nommer un nouveau produit et ensuite s'assurer que ce nom est unique. Nous avons écrit une rapide [OpenWhisk](http://openwhisk.apache.org/) action sans serveur pour gérer la validation, voici la logique de cette action. ``` js function main(args) { @@ -348,7 +348,7 @@ function main(args) { } ``` -En gros, tous les noms excepté "vista", "empire", and "mbp" sont valides. Bien, regardons donc le formulaire. +En gros, tous les noms exceptés "vista", "empire", and "mbp" sont valides. Bien, regardons donc le formulaire. ``` html