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 les types : tel, date, url, email, range, number, etc.
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 si vous devez comparer la saisie effectuée à une expression régulière vous pouvez en effet vous dispenser de JS ; il suffit de comparer la saisie à un 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 créer votre compte sur un site de rencontres coquin (lol).
Dans le cadre du formulaire d'inscription 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> *{font-size : 14pt ; } form {width : 80% ; border : 1px solid black; margin : 10px auto 10px auto ; } 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> ...

Dans le cadre du "responsive web design" la largeur du formulaire est exprimée en %.

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 tuto).
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 !

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.
Donc la soumission des données est conditionnée à la vérification de tests JS.

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] ;
Tests : 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).

Test 1

Saisissez deux adresses mail différentes et/ou deux mots de passe différents.
Le message "erreur de saisie s'affiche" et vous restez sur la page contenant le formulaire. Donc il n'y a pas soumission. A vous de jouer !

Test 2

Saisissez deux adresses mail identiques et deux mots de passe identiques.
Le message "OK" s'affiche puis vous êtes redirigé vers la page "inscription_trait.htm". Donc il y a eu soumission. A vous de jouer !

Test 3

Saisissez respectivement dans les quatre champs les valeurs farfelues suivantes : toto toto titi titi
Puis cliquez sur le bouton de commande. A vous de jouer !

Vous avez réussi à envoyer les données alors que les saisies ne correspondent pas aux pattern.

En effet les contrôles HTML5 ne fonctionnent que si le bouton de soumission est de type submit !

Solution définitive

Dans le cadre d'un formulaire de soumission de données le bouton d'envoi doit être impérativement de type submit afin que les contrôles de saisie HTML (grâce aux attributs pattern et required) s'appliquent.

Le code du formulaire (extraits)

<form action = "inscription_trait.htm" method ='post' onSubmit="return fenvoi()" > ... <button type ="submit"> inscription</button>

Le reste du code est inchangé.

Le bouton redevient de type submit.

Dans la balise form j'ai rajouté : onSubmit="return fenvoi()"