Les formulaires et JavaScript

Dans le tutoriel "HTML et CSS pour les débutants" nous avons abordé les formulaires.
Je vous ai montré que le HTML avait introduit de nouveaux types de champs. Ainsi désormais pour la balise input il existe désormais les types : tel, date, url, email, range, number.
De nouveaux attributs pour les zones de saisie sont apparus: optional, required, placeholder mais surtout l'attribut pattern qui a pour valeur une expression régulière.
De plus la version 3 de CSS a aussi amélioré considérablement l'ergonomie des formulaires avec de nouvelles pseudo classes telles :required, :invalid, :valid, etc.

Vous êtes en droit de vous dire que grâce à toutes ces nouveautés apportées par le pack HTML5 et CSS3 on peut parfaitement effectuer un contrôle de saisie côté client sans avoir à recourir à JavaScript.
En effet pour vérifier si le champ a une "value" ou si la saisie correspond à un format vous n'avez plus besoin de JS ; il suffit d'utiliser les attributs required et pattern.
Mais si vous devez comparer la saisie dans deux champs différents alors HTML, même version 5, ne vous est d'aucun secours puisque la notion de test n'existe pas dans un langage de balisage. Mais heureusement il y a JavaScript !

Première thématique : inscription à un site

Pour vous inscrire sur un site de rencontres coquin (lol) vous devez saisir en guise d'identifiant votre adresse mail et la confirmer puis choisir un mot de passe et le confirmer.
Le mot de passe doit contenir entre 6 et 8 caractères alphanumériques c'est à dire des lettres non accentuées et des chiffres. Les autres caractères sont bannis.

Première solution : sans javascript

... <style> label, input, button {display : inline-block ; width : 44% ; height : 30px ; margin :10px 1% 10px 1% } input:invalid {color : red; } input:valid {color : lime ; } button:hover {color : red ; box-shadow : 5px 5px 5px grey ; } ... <form action = "inscription_trait.htm" method ='post'> <p>Vous devez saisir votre adresse mail en guise d'identifiant et choisir un mot de passe. <br>Le mot de passe est composé de lettres non accentuées et de chiffres ; entre 6 et 8 caractères</p> <label>Tapez votre adresse mail : </label> <input type = "email" required placeholder = "n'oubliez pas @" name ='mail1'> <label>Confirmez votre adresse mail : </label> <input type = "email" required name ='mail2'> <label>Saisissez mot de passe :</label> <input type = "password" required pattern ='[A-z0-9]{6,8}' maxlength ='8' placeholder = 'entre 6 et 8 lettres ou chiffres' name ='passe1'> <label>Confirmer le mot de passe : </label> <input type = "password" required pattern = '[A-z0-9]{6,8}' maxlength ='8' name ='passe2'> <label></label><button type = 'submit'> inscription</button> </form> ...

En cas de succès de la soumission vous accéder à la page "inscription_trait.htm".
Page qui réserve quelques surprises ...

Quatre "input" dont deux de type "email" et deux de type "password"
Les attributs name dans chaque input ne sont utiles que dans le cadre du traitement PHP (traitement qui n'est pas évoqué dans ce chapitre).
Notez les pattern associés aux champs pour la saisie du mot de passe.

Test 1

Faites le test !

Bravo! vous accéder à la page "inscription_trait". Donc vous avez pu soumissioner avec succès.

Test 2

Faites le test !

Vous accéder quand même à la page "inscription_trait" alors que les deux adresses mail saisies sont différentes et les deux mots de passe sont également différents ...
Vous découvrez à cette occasion les limites du HTML !

Remarque : malgré l'absence d'un point après @ la première adresse mail est considérée comme valide. En effet pour un champ de type "email" le contrôle se limite à l'existence d'un symbole @.
Cependant l'emploi d'un champ de type email s'avère très utile sur les terminaux tactiles : la touche @ est rajoutée au clavier.

Solution avec un script (solution provisoire)

Grâce à JS il sera possible de comparer la saisie 1 à la saisie2 et de comparer la saisie 3 à la saisie 4

Le code HTML

En effet il n'y a qu'un petit changement dans le code HTML.

<button type = 'button' onclick = 'fenvoi()'> inscription</button>

Le bouton de type "submit" est remplacé par un bouton de type "button" pour pouvoir appeler une fonction JS.
En effet si je garde un bouton de type submit la soumission est effectuée dès que les contrôles HTML sont valides et même si les tests JS ne le sont pas.

Le script

function fenvoi() { // création des variables objets var mail1 = document.querySelector('input') ; var mail2 = document.querySelectorAll('input')[1] ; var passe1 = document.querySelectorAll('input')[2] ; var passe2 = document.querySelectorAll('input')[3] ; var formulaire = document.querySelector('form'); // test if(mail1.value == mail2.value && passe1.value == passe2.value) { alert ('ok') ; formulaire.submit() ; } else alert('erreur de saisie') ; } // fin fonction

J'utilise les nouvelles méthodes de l'objet document pour sélectionner les champs de saisie.
Il suffit de savoir compter jusqu'à 4 puisqu'il y a quatre "input" sachant que querySelector("input") référence le premier. Remarque : pour référencer le premier input j'aurais pu écrire : var mail1 = document.querySelectorAll('input')[0] ;

Si les deux adresses mail sont identiques et les deux mots de passe saisie sont identique alors soumission du formulaire (emploi de la méthode submit de JavaScript appliquée au formulaire).

Tests

Testez le code !