Contrôle de saisie & interactivité

Le JavaScript, comme je l'indiquais en introduction, est partout. Pour l'instant, nous allons le limiter principalement aux interactions utilisateurs (contrôle de saisie, validation de formulaire, interactivité).

Nous allons pratiquer les évènements JavaScript en ajoutant à notre TP Bart (Version JavaScript) un simple formulaire puis des contrôles de saisie.

L'objectif étant donc d'ajouter des contrôles de saisie sur votre page formulaire.

Deux solutions sont possibles : coder les contrôles nous-mêmes en JavaScript, ou s'appuyer sur la validation native du navigateur. Nous allons voir les deux.

Ajouter le formulaire sur votre page

La première étape va être d'ajouter dans la page un formulaire HTML qui doit ressembler à :

Je vous laisse écrire le code et le style du formulaire en question. Quelques règles :

• Vous pouvez ajouter Bootstrap si vous le souhaitez.
• Vous devez utiliser un « form »
• Vous devez externaliser la CSS.
• Votre formulaire doit être avant le tableau.

La validation sans Librairie

Ajouter des contrôles, finalement c'est simple. Il « faut juste » :

• Ajouter un évènement « onSubmit ».
• Vérifier que les champs input ne sont pas vides (ou du moins, possèdent les valeurs attendues).

En pratique ça va donner :

function validateForm(evt) {
  // Empêche l'envoi du formulaire au serveur (nous n'en avons pas ici),
  // c'est notre JavaScript qui va faire le travail.
  evt.preventDefault();

  const name = document.getElementById("name").value;
  const password = document.getElementById("password").value;

  if (name == null || name == "") {
    alert("Name can't be blank");
    return;
  }

  if (password.length < 6) {
    alert("Password must be at least 6 characters long.");
    return;
  }

  // Cas de réussite : la saisie est valide, votre code ici.
}

// Attacher l'évènement en JS
document
  .getElementById("monForm")
  .addEventListener("submit", validateForm, true);

// Vous pouvez également attacher l'événement directement dans le HTML avec
// <form onsubmit="validateForm(this)">
// …

Un Instant !

evt.preventDefault() ? Eh oui, c'est aussi simple que ça ! En JS si vous souhaitez stopper la soumission d'un formulaire il suffit d'appeler evt.preventDefault() dans votre fonction de validation. Votre navigateur saura automatiquement qu'il doit arrêter immédiatement la soumission du formulaire. Votre serveur ne recevra donc pas les données.

À faire

• Je vous laisse le mettre en place dans votre code.
• Rendre la page interactive avec les données saisies (via un onsubmit en HTML ou, submit via les events)

Faire l'action souhaitée

Maintenant que nos informations sont validées, il faut les utiliser dans la page. En reprenant le code du TP précédent, je vous laisse intégrer la logique suivante :

• Le tableau ne doit pas être visible au chargement de la page.
• Une fois la validation du formulaire effective (saisie correcte), le tableau doit s'afficher avec dedans la phrase choisie par l'utilisateur (ainsi que le nombre).
• Le formulaire ne doit plus être visible (ainsi que la card dans laquelle celui-ci est).
• « Une action » recommencer la saisie doit permettre de :
  • Masquer le tableau
  • Afficher le formulaire à nouveau

Rappels

Je vous rappelle que vous avez l'aide-mémoire ainsi que le support du cours pour vous aider. Mais l'ensemble va reposer sur :

• Des sélecteurs, exemple document.getElementById('tableau').
• L'obtention de valeur, exemple document.getElementById('monInputText').value.
• Masquer / afficher des éléments, exemple document.getElementById('monInputText').className='hidden'.

Avec la validation native du navigateur

Nous avons vu la façon manuelle de valider les formulaires. Je pense que sans vous faire un dessin… vous vous rendez compte que si nous avons 200 champs, ça va être plus compliqué ! D'autant plus que plus notre formulaire sera complexe, plus celui-ci aura des règles complexes.

Heureusement, votre navigateur sait déjà faire une grande partie du travail, directement en HTML :

<input type="text" id="name" required minlength="2" />
<input type="password" id="password" required minlength="6" />
<input type="email" id="email" required />

Avec les attributs required, minlength, type="email", etc. le navigateur bloque la soumission et affiche un message d'erreur, sans une seule ligne de JavaScript.

Alors pourquoi avoir codé la validation ?

Bonne question ! La validation native couvre les cas simples. Le JavaScript reste nécessaire pour les règles métier (comparer deux champs, vérifier un format spécifique, afficher une erreur personnalisée…). En pratique, on combine les deux. Et rappelez-vous : la validation côté client est du confort utilisateur, le serveur doit toujours revalider les données (vous l'avez vu en PHP).

À faire

Réécrire votre formulaire pour utiliser la validation native du navigateur en complément de votre validation JavaScript.

La suite ? Le TP 3.1 pour une page 100% interactive.