Différences

Ci-dessous, les différences entre deux révisions de la page.

--- dev:javascript:core:fondamentaux [2024/10/12 13:24] – yoann
+++ dev:javascript:core:fondamentaux [2024/10/13 11:24] (Version actuelle) – yoann
@@ Ligne 191: / Ligne 191: @@
 });
 </code>
+==== Traitement des formulaires ====
+Les formulaires permettent de regrouper des champs que l'utilisateur peut utiliser pour saisir/transmettre des données à l'application web.
+Dans le document HTML :
+<code html>
+<form>
+  <label for="sform_tinput">Rechercher :</label>
+  <input type="text" id="user_input" name="sform_tinput" placeholder="keywords here" required>
+  <input type="submit" id="searchBT" value="Go">
+</form>
+</code>
+La plupart des champs de formulaire possèdent un attribut **value** qui contient la saisie de l'utilisateur:
+<code javascript>
+//Obtenir la valeur saisie par l'utilisateur
+document.getElementById("user_input").value;
+</code>
+Dans le cas des cases à cocher, il faudra vérifier si la propriété **checked** est vraie ;
+<code javascript>
+// L'attribut checked est de type bool
+document.getElementById("anID").checked
+</code>
+Les boutons radio partagent l'attribut ''name'' mais un seul bouton radio est actif à la fois.
+<code html>
+<form>
+  <label>Préférence de couleur :</label>
+  <input type="radio" id="red" name="couleur" value="red" checked>
+  <label for="red">Rouge</label>
+  <input type="radio" id="blue" name="couleur" value="blue">
+  <label for="blue">Bleu</label>
+  <input type="radio" id="green" name="couleur" value="green">
+  <label for="green">Vert</label>
+</form>
+</code>
+Pour les traiter, on récupère l'ensemble des boutons radio et on les parcours jusqu'a trouver l'attribut checked à vrai :
+<code javascript>
+// Récupère tous les balises input de type bouton radio ayant l'attribut name="couleur"
+let boutons = document.querySelectorAll('input[name="couleur"]');
+let couleur = "";
+for (let i = 0; i < boutons.length; i++) {
+    if (boutons[i].checked) {
+        couleur = boutons[i].value;
+        break;
+    }
+}
+// Affiche la valeur du bouton radio coché
+console.log(couleur);
+</code>
+Par défaut, lorsque l'utilisateur clique sur le bouton de soumission du formulaire (champ submit) un appel au serveur distant est initié : cela provoque un rechargement de la page qui empêche l'exécution du code Javascript coté client.
+Si nos traitements ont lieu côté client, ce comportement par défaut n'est pas approprié : dans ce cas, on peut le désactiver.
+Pour désactiver ce comportement par défaut, il faut :
+  * Écouter cet événement "submit" ;
+  * Empêcher ce comportement grâce à la méthode ''preventDefault()''.
+<code javascript>
+const form = document.getElementById("sform");
+form.addEventListener("submit", (event) => {
+        // On désactive le rechargement de la page
+        event.preventDefault();
+        console.log("Il n’y a pas eu de rechargement de page");
+});
+</code>
+En général, on vérifie la saisie de l'utilisateur lorsque celui-ci renseigne les champs ou envoie le formulaire :
+  * L’ événement "input" : se déclenche à chaque fois que l’utilisateur tape une lettre dans le champ ;
+  * L’ événement "change" : se déclenche quand l’utilisateur a fini de taper, et sélectionne un autre élément de la page ;
+  * L’ événement "submit" : lorsque l'utilisateur valide le formulaire.
+===== Gestion des erreurs =====
+Javascript utilise la gestion des exceptions via les instructions **try** / **catch** et **throw**. Ce système permet notamment de reporter/centraliser la gestion des erreurs.
+<code javascript>
+function verifyFormField(a_field) {
+    if (a_field.value === "") {
+        throw new Error(`Le champ ${a_field.id} est vide`)
+    }
+}
+</code>
+La fonction définie ci-dessus pourra être appelée n fois dans le code pour chaque champ du formulaire mais selon les besoins, la gestion des erreurs pourra être différente :
+<code javascript>
+let form = document.querySelector("form")
+form.addEventListener("submit", (event) => {
+    try {
+        event.preventDefault();
+        let name_field = document.getElementById("name");
+        verifyFormField(name_field);
+        let mail_field = document.getElementById("email");
+        verifyFormField(mail_field);
+        // traitements du formulaire
+        // ...
+    } catch (error) {
+        //gestion des erreurs centralisée et adaptée à l'application ici
+        console.log("Une erreur est survenue : " + error.message)
+    }
+})
+</code>
 ===== Tests =====
 Frameworks de tests :

wikinotes

Outils pour utilisateurs

Outils du site

Différences

Outils de la page