Formulaire d'inscription Web contrôlé en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Formulaire Javascript - Validation client

Quel site Web ne propose pas de formulaire d'inscription ou d'identification et de contact. L'objectif de cette formation est de contrôler les saisies de l'utilisateur à la volée, par le code client, afin de ne pas solliciter le serveur. Ainsi, une fois toutes les informations vérifiées et collectées, elles peuvent être transmises à un code serveur (tel le Php) pour réaliser la transmission et l'inscription en base de données.



Sources et problématique
Nous proposons de débuter à partir d'une page Html offrant déjà la structure et l'organisation des contrôles, tel que le présente la capture ci-dessus.

• Télécharger le fichier formulaire-javascript.rar en cliquant sur son lien,
• Le décompresser dans le dossier de votre choix,

La décompression conduit au fichier de la page Web à la racine, accompagné de ses ressources dans trois sous dossiers : images, js et styles.

• Double cliquer sur le fichier formulaire-inscription.html pour l'ouvrir dans un navigateur,

Le formulaire d'inscription déjà conçu apparaît à l'écran, tel que le propose l'extrait de la capture ci-dessus. Il est constitué de contrôles Html Input comme des zones de texte, de mots de passe ou encore d'un bouton. Vous notez de même la présence d'une liste déroulante (contrôle Select), pour le choix de la civilité.

Mais si vous cliquez sur le bouton Valider, rien ne se produit. Aucun code Javascript n'a en effet été intégré à ce stade. Nous proposons d'exploiter les événements attachés aux contrôles HTML pour déclencher des fonctions Javascript permettant de vérifier la saisie à la volée.

• Dans le dossier de décompression, cliquer avec le bouton droit de la souris sur le fichier formulaire-inscription.html,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad ++,

Dans la section Head de la page Html, vous notez la présence de blocs de scripts Javascript :

<meta http-equiv='content-language' content='fr' />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script language='javascript' type='text/javascript'>

</script>
<script language='javascript' src='js/v_inscr.js'></script>
</head>

La première section est prévue pour accueillir un code au sein de la page. Nous y placerons les déclarations de variables publiques ainsi que la fonction pour valider le formulaire, au clic sur le bouton. La seconde section est une référence à la ressource externe v_inscr.js.

• Dans le dossier de décompression, double cliquer sur le dossier js pour l'ouvrir,
• Cliquer avec le bouton droit de la souris sur le fichier v_inscr.js,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad ++,

Quatre fonctions sont déclarées. La dernière isValidDate est récupérée du Web afin de contrôler la validité de la date de naissance saisie par l'internaute. Les trois autres, dépourvues de code Javascript à ce stade seront appelées sur les événements déclenchés depuis les contrôles de formulaire. La fonction saisie se chargera de vider le contenu de la zone de texte au clic. La fonction retablir permettra de réinitialiser le texte par défaut, si aucune modification n'a été détectée lorsque la souris quitte la zone d'influence du contrôle Html. Enfin, la fonction mev contrôlera en temps réel la validité de chaque information inscrite par l'internaute et ce, quel que soit le contrôle. Elle sera appelée sur l'événement de la validation du contrôle. C'est la raison pour laquelle ces trois fonctions attendent deux paramètres. Il y a l'information inscrite par défaut dans le contrôle (txt_defaut) et le nom du contrôle concerné par l'opération (nom_controle).

• Afficher de nouveau la page Web formulaire-inscription.html dans l'éditeur Notepad,

Les champs de formulaire pour la saisie se situent entre les lignes 48 et 82 pour un éditeur Notepad.

<form id='inscription' name='inscription' method='post' action='formulaire-inscription.html'>
<div class='div_input_form'>
<select id='civilite' name='civilite' >
<option value='0'>Civilité</option>
<option value='1'>Madame</option>
...
<div class='div_input_form'>
<input type='button' name='valid_inscr' id='valid_inscr' class='input_form' value='Valider' />
</div>
</form>

Comme l'indique l'extrait de code ci-dessus, ils sont tous imbriqués dans une balise spéciale et indispensable, la balise Hml form. C'est elle qui délimite la zone du formulaire et donc c'est elle qui permet de spécifier les contrôles à considérer pour transmettre leurs valeurs. Nous pourrons ainsi les poster, une fois les données vérifiées, afin qu'un code serveur les exploite pour les archiver en base de données par exemple. A ce titre, vous notez la présence de son attribut method (method='post'). L'attribut action lui est intimement lié pour désigner la page à appeler pour le traitement des données ainsi postées. Comme vous le remarquez, ici la page appelée est la même page que celle du formulaire. Au rechargement donc, toujours par un code serveur, les données postées si elles existent, pourront être réceptionnées et traitées.

Variables publiques de validation
Mais ce qui nous intéresse ici est ce qui se produit en amont. La vérification des données par un code client (le Javascript), avant de les poster.

Nous proposons de déclarer autant de variables booléennes qu'il y a de contrôles Html dans le formulaire d'inscription. Nous souhaitons toutes les initialiser sur la valeur False, indiquant que l'état du contrôle lié n'est pas validé. Les fonctions du script externe auront à charge de basculer chacune de ces variables sur la valeur True si le test est un succès. Ainsi, la fonction de validation finale qui sera appelée au clic sur le bouton situé en bas de ce formulaire n'aura plus qu'à tester ces valeurs. Si toutes les variables booléennes valent True, cela signifie que toutes les informations ont été validées avec succès. En conséquence, le code de la fonction Javascript pourra soumettre l'intégralité des données pour qu'un code serveur (Php) puisse les réceptionner et les consolider afin de les inscrire en base de données.

• Dans le script de la section Head de la page Html, ajouter le code suivant :

<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script language='javascript' type='text/javascript'>
var b_civilite=false; var b_nom=false; var b_prenom=false; var b_date=false; var b_mail=false; var b_mp=false;

function envoyer()
{
if(b_civilite==true && b_nom==true && b_prenom ==true && b_date ==true && b_mail ==true && b_mp==true)
{
document.getElementById('message').innerText = 'Envoi serveur';
//document.getElementById('inscription').submit();
}
else
{
document.getElementById('message').innerText = 'Le formulaire n'est pas complet';
}
}
</script>
<script language='javascript' src='js/v_inscr.js'></script>
</head>

Comme annoncé, nous commençons par déclarer les six variables correspondant à l'état respectif de chacun des contrôles du formulaire. Comme nous les initialisons à false, elles indiquent que le formulaire n'est pas validé et qu'il ne peut pas être soumis. Comme ces déclarations de variables se produisent en dehors de toute fonction, elles ont une portée publique. Elles pourront donc être modifiées par les fonctions de traitement selon des tests réalisés sur la saisie de l'utilisateur.

Nous créons ensuite la fonction envoyer qui doit être appelée au clic sur le bouton Valider situé en bas du formulaire. Cette fonction a la charge de poster les données saisies en soumettant le formulaire. Mais cette action ne doit avoir lieu que si l'ensemble des données a été validée, en d'autres termes si et seulement si, toutes les variables booléennes ont été basculées à true. C'est la raison pour laquelle nous exploitons l'instruction conditionnelle Javascript if, afin de vérifier ensemble (&&) que toutes ces variables sont à true. La méthode submit d'un contrôle Html Form désigné par son identifiant grâce à la méthode getElementById de l'objet document, permet de soumettre le formulaire avec toutes ses données. Nous plaçons cette ligne en commentaire puisque nous n'irons pas ici jusqu'au traitement résultant, celui du Php. Ainsi, nous aurons le loisir de visualiser le message de confirmation inscrit dans le calque message : document.getElementById('message').innerText = 'Envoi serveur';

Dans le cas contraire en revanche (else), nous informons l'internaute que ses données ne peuvent être soumises puisque certaines saisies demeurent erronées. Et pour ce faire, nous exploitons le même calque d'identifiant message.

Comme toujours, une fonction pour s'exécuter doit être appelée, ici en l'occurrence, au clic sur le bouton Valider.

• En ligne 95 pour un éditeur Notepad, ajouter l'appel dans la balise du bouton, comme suit :

<div class='div_input_form'>
<input type='button' name='valid_inscr' id='valid_inscr' class='input_form' value='Valider' onclick='envoyer()'/>
</div>

• Enregistrer les modifications et basculer sur le navigateur pour visualiser la page Web,
• Enfoncer la touche F5 du clavier pour rafraîchir la page,
• Cliquer sur le bouton Valider en bas du formulaire,

Comme l'illustre la capture ci-dessus, la fonction envoyer est parfaitement appelée, donc l'événement du clic est parfaitement géré. Comme les données n'ont pas encore pu être vérifiées, tous les booléens sont restés calés sur la valeur false. En conséquence, le message de la branche Else de l'instruction If se déclenche pour informer l'internaute, que le formulaire ne peut être soumis en l'état.

Vider les zones de texte au clic
Nous proposons d'enclencher des actions désormais usuelles pour des raisons d'ergonomie. Lorsque l'internaute clique dans une zone de texte pour la renseigner, le message par défaut doit disparaître pour laisser place à la saisie. Lorsque la souris quitte la zone d'influence du contrôle, si aucune valeur n'a été renseignée, le texte par défaut doit réapparaître pour continuer de guider l'utilisateur. Pour chaque contrôle Html Input concerné, ce sont donc les fonctions saisie et retablir du script externe qui doivent être appelées, en passant à chaque fois le texte par défaut et le nom du contrôle concerné. Ces fonctions existent déjà mais sont dénuées de code. Nous devons les bâtir.

• Revenir dans l'éditeur de code de la page Html,
• Ajouter les gestionnaires d'événements à l'ensemble des contrôles Input du formulaire d'inscription, comme suit :

<form id='inscription' name='inscription' method='post' action='formulaire-inscription.html'>
<div class='div_input_form'>
<select id='civilite' name='civilite' onChange='Javascript:if(this.value>0){ b_civilite=true; } else { b_civilite=false; }'>
<option value='0'>Civilité</option>
<option value='1'>Madame</option>
<option value='2'>Monsieur</option>
</select>
</div>
<div class='div_input_form'>
<input type='text' name='nom' id='nom' maxlength='50' class='input_form' value='Votre nom' onClick='saisie('Votre nom',this.id)' onMouseOut='retablir('Votre nom',this.id)' onblur='mev('Votre nom',this.id)' />
</div>
<div class='div_input_form'>
<input type='text' name='prenom' id='prenom' maxlength='50' class='input_form' value='Votre prénom' onClick='saisie('Votre prénom',this.id)' onMouseOut='retablir('Votre prénom',this.id)' onblur='mev('Votre prénom',this.id)' />
</div>
<div class='div_input_form'>
<input type='text' name='date_n' id='date_n' maxlength='50' class='input_form' value='Naissance, ex :19/04/1996' onClick='saisie('Naissance, ex :19/04/1996',this.id)' onMouseOut='retablir('Naissance, ex :19/04/1996',this.id)' onblur='mev('Naissance, ex :19/04/1996',this.id)' />
</div>
<div class='div_input_form'>
<input type='text' name='mail_inscr' id='mail_inscr' maxlength='150' class='input_form' value='Votre mail' onClick='saisie('Votre mail',this.id)' onMouseOut='retablir('Votre mail',this.id)' onblur='mev('Votre mail',this.id)' />
</div>
<div class='div_input_form'>
<input type='text' name='cmail_inscr' id='cmail_inscr' maxlength='150' class='input_form' value='Confirmer le mail' onClick='saisie('Confirmer le mail',this.id)' onMouseOut='retablir('Confirmer le mail',this.id)' onblur='mev('Confirmer le mail',this.id)'/>
</div>
<div class='div_input_form'>
Votre mot de passe : entre 5 et 10 caractères<br />
<input type='password' name='mp_inscr' id='mp_inscr' maxlength='10' class='input_form' value='Mot de passe' onClick='saisie('Mot de passe',this.id)' onMouseOut='retablir('Mot de passe',this.id)' onblur='mev('Mot de passe',this.id)'/>
</div>
<div class='div_input_form'>
Confirmer le mot de passe :<br />
<input type='password' name='mp_conf' id='mp_conf' maxlength='10' class='input_form' value='Confirmer MP' onClick='saisie('Confirmer MP',this.id)' onMouseOut='retablir('Confirmer MP',this.id)' onblur='mev('Confirmer MP',this.id)' />
</div>
<div class='div_input_form'>
<input type='button' name='valid_inscr' id='valid_inscr' class='input_form' value='Valider' onclick='envoyer()' />
</div>
</form>

Tout d'abord, nous déclenchons un code intégré dans la balise de la liste déroulante, au changement de valeur détecté. Si la valeur ne vaut plus Zéro, la variable booléenne est affectée à True, signifiant que le choix de la civilité a correctement été réalisé.

onChange='Javascript:if(this.value>0) { b_civilite=true; } else { b_civilite=false; }'

Toutes les autres balises Input concernent des zones de texte. Leur traitement est donc similaire. Pour chacune d'entre elles donc, nous appelons la fonction dédiée à l'événement intercepté.

onClick='saisie('Votre nom',this.id)' onMouseOut='retablir('Votre nom',this.id)' onblur='mev('Votre nom',this.id)' />

Pour chaque zone de texte, l'événement onClick appelle la fonction saisie du script externe avec son texte par défaut et son identifiant (this.id) en paramètre. Un code optimisé devra se charger de vider le contenu de la zone de texte correspondante, si le texte présent est toujours l'information proposée par défaut. L'événement onMouseOut appelle la fonction retablir avec les deux mêmes paramètres. Son objectif est l'inverse. Lorsque la souris quitte la zone d'influence du contrôle, si le texte est vide, elle doit rétablir l'information par défaut destinée à guider l'internaute dans la saisie. Enfin, l'événement onBlur se déclenche lorsque le contrôle qui était actif est considéré comme validé. C'est la raison pour laquelle nous appelons la fonction mev, toujours avec les mêmes paramètres. Elle aura à charge de vérifier la saisie du contrôle concerné pour la valider (variable booléenne à true) ou la réfuter (variable booléenne à false).

Comme chacune des fonctions appelée est vide de code, aucune incidence ne peut être constatée, sauf pour la liste déroulante qui intègre son propre traitement. Pour tester l'évolution des contrôles que nous mettrons en place, nous proposons d'ajouter une instruction dans la fonction envoyer, permettant de constater en temps réel l'état des variables booléennes.

• Dans les bornes de la fonction envoyer du script interne, après le else de l'instruction If, ajouter la ligne de code suivante :

document.getElementById('message').innerText += '-' + b_civilite + '-' + b_nom + '-' + b_prenom + '-' + b_date + '-' + b_mail + '-' + b_mp;

Dans le calque message, à la suite de l'information inscrite par l'instruction If, nous concaténons toutes les valeurs des variables booléennes, séparées d'un tiret, afin de les contrôler étape par étape.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page Web,
• Choisir une civilité dans la liste déroulante puis cliquer sur le bouton Valider,

Comme l'illustre la capture ci-dessus, seul le booléen correspondant au choix dans la liste déroulante est validé, du fait de la sélection préalable d'une civilité et du code Javascript intégré dans son événement onClick. Nous reproduirons ce test régulièrement pour contrôler l'efficacité du code de vérification.

Mais avant cela, nous devons nous soucier des fonctions permettant de vider ou de rétablir l'information contenue dans les zones de texte.

• Afficher la page du script externe (v_inscr.js) dans l'éditeur de code,
• Dans les bornes de la fonction saisie, ajouter les instructions suivantes :

if(document.getElementById(nom_controle).value == txt_defaut)
document.getElementById(nom_controle).value='';

Si l'information contenue dans le contrôle Input en cours est le texte par défaut passé en paramètre au moment du clic, alors nous vidons son contenu (value='';). Le traitement de la fonction retablir est l'exact inverse.

• Dans les bornes de la fonction retablir, ajouter les instructions suivantes :

if(document.getElementById(nom_controle).value == '')
document.getElementById(nom_controle).value = txt_defaut;

Lorsque la souris quitte la zone d'influence du contrôle Input, si son contenu est vide (value==''), alors nous le rechargeons de l'information par défaut (value=txt_defaut) passée en paramètre, au moment de l'appel.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page par le raccourci CTRL + F5 pour réactualiser les ressources externes,
• Cliquer tour à tour dans plusieurs zones de texte,

Comme vous le constatez, à chaque clic, la zone de texte concernée se vide de son contenu pour libérer la place. Mais lorsque la souris quitte sa zone d'influence et qu'aucune information n'a été saisie, le texte par défaut réapparaît. Nous proposons ainsi une utilisation intuitive et ergonomique du formulaire.

Contrôler la validité de la saisie en temps réel
Chaque contrôle Input appelle la fonction mev lorsque l'événement onBlur est intercepté, soit lorsque le contrôle est considéré comme validé. En temps réel donc, nous proposons d'aiguiller l'internaute si des erreurs sont interceptées. Les vérifications sont multiples. La date de naissance doit être tapée dans un format date reconnu et valide. Les noms et prénoms doivent contenir un minimum de caractères. L'adresse mail doit au moins contenir le symbole de l'arobase (@) et le caractère du point. De plus, l'adresse de confirmation doit être identique. Le mot de passe doit proposer entre 5 et 10 caractères. Enfin le mot de passe confirmé doit être identique. A chaque fois qu'une erreur est décelée, le contrôle concerné doit être mis en valeur et une information doit apparaître dans le div d'identifiant message.

• Revenir dans l'éditeur de code du script externe,
• Dans les bornes de la fonction mev, ajouter les instructions suivantes :

var longueur = document.getElementById(nom_controle).value.length;

if(longueur<4 || document.getElementById(nom_controle).value == txt_defaut)
{
document.getElementById(nom_controle).style.border='#CC3300 2px solid';

switch(nom_controle)
{
case 'nom':
b_nom=false;
break;
case 'prenom':
b_prenom=false;
break;
case 'date_n':
b_date = false;
break;
case 'mail_inscr':
b_mail=false;
break;
case 'mp_inscr':
b_mp=false;
break;
}
}
else
{
document.getElementById(nom_controle).style.border='#333 1px solid';

switch(nom_controle)
{
case 'nom':
b_nom=true;
break;
case 'prenom':
b_prenom=true;
break;
}
}

Nous commençons par réaliser un contrôle commun à l'ensemble des zones de saisie. Il s'agit de vérifier que l'information tapée n'est ni le texte proposé par défaut, ni insuffisante en nombre de caractères. C'est pourquoi nous exploitons la propriété length afin de retourner la longueur de l'information saisie. Nous stockons cette information numérique dans la variable locale longueur. Si l'un des deux tests est vérifié, nous affectons la propriété border du contrôle Input (border='#CC3300 2px solid';), afin de mettre en évidence le problème soulevé. Puis nous réaffectons les variables booléennes des contrôles à false. Dans le cas contraire, nous rétablissons la bordure d'origine pour indiquer que la saisie est conforme. Mais seuls les contrôles nom et prenom sont concernés en raison des traitements spécifiques que nous allons intégrer en amont. En effet, pour les autres champs, le contrôle de validité n'est pas suffisant.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,
• Réaliser quelques saisies de 2 à trois caractères dans certains champs,

Lorsque vous quittez la zone du contrôle Input, celui-ci est déclaré comme non conforme par le code Javascript déclenché instantanément par l'événement onBlur. Ainsi ses bordures apparaissent en rouge, comme l'illustre la capture ci-dessous, afin d'alerter l'internaute sur l'erreur à corriger.

Bien entendu, si la longueur saisie dans les autres contrôles est suffisante, le formulaire n'est pas encore considéré comme valide pour autant. Le code Javascript que nous avons intégré ne bascule que deux booléens à true. Les vérifications sur la date, le mail et le mot de passe sont plus complexes.

Néanmoins à ce stade, si vous choisissez une civilité et saisissez un prénom et un nom corrects, les trois premières variables booléennes correspondantes, sont basculées à True pour confirmer leur validité.



Il s'agit maintenant de réaliser des contrôles plus poussés pour les saisies spécifiques. Commençons par la vérification sur la date de naissance fournie par l'internaute :

• Revenir dans l'éditeur de code du script externe,
• Après la déclaration de la variable longueur, ajouter le test sur le contrôle Input de la date, tout en intégrant la condition précédente dans un else if :

var longueur = document.getElementById(nom_controle).value.length;

if(nom_controle=='date_n')
{
if(!isValidDate(document.getElementById(nom_controle).value, 'DMY'))
{
document.getElementById(nom_controle).style.border ='#CC3300 2px solid';
document.getElementById('message').innerText = 'Votre date de naissance doit être saisie au format jj/mm/aaaa';
b_date=false;
}
else
{
document.getElementById('message').innerText='';
document.getElementById(nom_controle).style.border = '#333 1px solid';
b_date=true;
}
}
else if(longueur<4 || document.getElementById(nom_controle).value==txt_defaut)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';...

Nous passons la valeur saisie (document.getElementById(nom_controle).value) à la fonction Javascript isValidDate, proposée par défaut dans ce script externe. Si le test échoue, comme précédemment, nous transformons l'aspect des bordures du contrôle. De plus, nous inscrivons un message explicatif dans le calque situé au-dessus du formulaire. Dans le cas contraire, nous vidons cette zone de message, rétablissons les bordures par défaut et basculons la variable booléenne à true.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,
• Saisir des informations correctes pour les trois premiers champs,
• Taper une date incomplète dans la quatrième zone de saisie,

Comme l'illustre la capture ci-dessus, aucune alerte n'est déclenchée sur la saisie du nom, du prénom ou sur le choix de la civilité. Instantanément en revanche, le contrôle Input de la date de naissance s'illumine accompagné d'un message d'erreur explicite. En cas de saisie correspondant au format demandé, l'erreur disparaît et le remplissage du formulaire peut se poursuivre. Il s'agit maintenant de contrôler la validité de l'adresse mail fournie.

• Revenir dans l'éditeur de code du script externe,
• Entre l'instruction If de la date et l'instruction esle if du contrôle sur la longueur, ajouter le bloc de code suivant :

if(nom_controle=='mail_inscr')
{
if(document.getElementById(nom_controle).value.indexOf('@') == -1 || document.getElementById(nom_controle).value.indexOf('.') == -1)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Votre mail ne semble pas correct, corrigez-le';
b_mail=false;
}
else if(document.getElementById('cmail_inscr').value != '' && document.getElementById('cmail_inscr').value != 'Confirmer le mail')
{
if(document.getElementById(nom_controle).value != document.getElementById('cmail_inscr').value)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Les deux mails ne correspondent pas';
b_mail=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
}
}
else
{
document.getElementById('message').innerText ='';
document.getElementById(nom_controle).style.border='#3331px solid';
}
}
else if(nom_controle=='cmail_inscr')
{
if(document.getElementById(nom_controle).value.indexOf('@') == -1 || document.getElementById(nom_controle).value.indexOf('.') == -1)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Votre confirmation de mail ne semble pas correcte, corrigez-le';
b_mail=false;
}
else if(document.getElementById(nom_controle).value != document.getElementById('mail_inscr').value)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Les deux mails ne correspondent pas';
b_mail=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
b_mail=true;
}
}

Grâce à la méthode indexOf des variables de type string, nous testons tout d'abord la présence conjointe des deux caractères indispensables, à savoir l'arobase et le point. Lorsque cette méthode retourne la valeur -1, elle indique que le caractère passé en paramètre n'a pas été trouvé dans la chaîne de caractères (la saisie du contrôle). Dans ces conditions, comme précédemment, nous mettons en valeur le contrôle incriminé par ses bordures, affichons un message explicatif et réglons la variable booléenne (b_mail=false).

Sinon, si le mail de confirmation avait déjà été saisie (cmail_inscr), nous vérifions que les deux entrées ne sont pas différentes, en conséquence de quoi, nous prenons les mêmes dispositions. Dans les cas restants, nous estimons que la saisie du mail est correcte. Donc nous vidons la zone de message, et redéfinissons les bordures par défaut.

Puis, nous débutons une nouvelle branche else if afin de réaliser exactement les mêmes vérifications sur le contrôle cmail_inscr, soit sur l'adresse mail de confirmation. Nous nous assurons notamment de la présence des deux caractères requis mais aussi de la correspondance de saisie entre les deux champs, si tous deux sont renseignés.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,
• Remplir les informations correctement de la civilité jusqu'à la date incluse,
• Puis, saisir une adresse mail incomplète,

En validant la zone, le contrôle informe instantanément sur l'erreur commise. Dans l'exemple de la capture ci-dessus, il manque le suffixe. L'adresse est considérée comme incomplète donc incorrecte. En revanche, si vous la complétez, l'alerte disparaît automatiquement. Les mêmes pointages sont engagés sur le contrôle permettant la vérification de l'adresse de confirmation en plus de la validité sur la correspondance. Si vous cliquez sur le bouton Valider alors que toutes les saisies sont correctes, vous remarquez que seule la variable booléenne du mot de passe reste calibrée à false, empêchant la validation du formulaire.

• Revenir dans l'éditeur de code du script externe,
• Après la branche else if de la vérification du mail, ajouter les branches else if du contrôle du mot de passe, comme suit :

else if(nom_controle=='mp_inscr')
{
if(document.getElementById(nom_controle).value.length < 5 || document.getElementById(nom_controle).value.length > 10)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Le mot de passe doit comporter entre 5 et 10 caractères';
b_mp=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
}
}
else if(nom_controle=='mp_conf')
{
if(document.getElementById(nom_controle).value != document.getElementById('mp_inscr').value)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Les mots de passe doivent être identiques';
b_mp=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
b_mp=true;
}
}

Le premier double test consiste à vérifier que l'information saisie ne comporte pas, soit moins de 5 caractères, soit plus de 10 caractères (||). Et c'est bien sûr la propriété length d'une variable de type string, appliquée sur le contenu (value) du contrôle Input, qui permet de renvoyer cette information. Si tel est le cas, comme toujours, la bordure du contrôle est mise en valeur, un message explicatif est inscrit et la variable booléenne est recalée sur false. Concernant la zone de confirmation du mot de passe (mp_conf), nous nous assurons que les deux saisies sont équivalentes.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page Web,
• Remplir chaque information demandée par le formulaire d'inscription,
• Tester un mot de passe erroné,
• Puis, cliquer sur le bouton Valider,

Si les deux mots de passe ne correspondent pas et/ou ne respectent pas les règles de longueur, le booléen est réglé à false, empêchant la validation générale du formulaire. En revanche, si toutes les saisies contrôlées en temps réel sont correctes, la validation du formulaire est acceptée et la soumission des données au serveur peut se faire. C'est ce qu'illustre la capture ci-dessus après avoir pris soin de passer en commentaire la ligne de test de la fonction envoyer dans le script interne.

Pour parfaire l'application et la validation, à l'instar du contrôle effectué sur l'adresse mail, celui sur le mot de passe devrait être doublé dans le cas où, l'internaute après avoir saisi et confirmé son mot de passe, viendrait à le changer dans la première zone. Une branche else if supplémentaire deviendrait alors nécessaire, telle que proposée dans le code complet de la fonction mev ci-dessous :

function mev(txt_defaut, nom_controle)
{
var longueur = document.getElementById(nom_controle).value.length;

if(nom_controle=='date_n')
{
if(!isValidDate(document.getElementById(nom_controle).value, 'DMY'))
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Votre date de naissance doit être saisie au format jj/mm/aaaa';
b_date=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
b_date=true;
}
}
else if(nom_controle=='mail_inscr')
{
if(document.getElementById(nom_controle).value.indexOf('@') == -1 || document.getElementById(nom_controle).value.indexOf('.') == -1)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Votre mail ne semble pas correct, corrigez-le';
b_mail=false;
}
else if(document.getElementById('cmail_inscr').value != '' && document.getElementById('cmail_inscr').value != 'Confirmerle mail')
{
if(document.getElementById(nom_controle).value != document.getElementById('cmail_inscr').value)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Les deux mails ne correspondent pas';
b_mail=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
}
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
}
}
else if(nom_controle=='cmail_inscr')
{
if(document.getElementById(nom_controle).value.indexOf('@') == -1 || document.getElementById(nom_controle).value.indexOf('.') == -1)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Votre confirmation de mail ne semble pas correcte, corrigez-le';
b_mail=false;
}
elseif(document.getElementById(nom_controle).value != document.getElementById('mail_inscr').value)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Les deux mails ne correspondent pas';
b_mail=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
b_mail=true;
}
}
else if(nom_controle=='mp_inscr')
{
if(document.getElementById(nom_controle).value.length < 5 || document.getElementById(nom_controle).value.length > 10)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Le mot de passe doit comporter entre 5 et 10 caractères';
b_mp=false;
}
else if(document.getElementById('mp_conf').value !='' && document.getElementById('mp_conf').value != 'Confirmer MP')
{
if(document.getElementById(nom_controle).value != document.getElementById('mp_conf').value)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Les deux mots de passe ne correspondent pas';
b_mp=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
}
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
}
}
else if(nom_controle=='mp_conf')
{
if(document.getElementById(nom_controle).value != document.getElementById('mp_inscr').value)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';
document.getElementById('message').innerText = 'Les mots de passe doivent être identiques';
b_mp=false;
}
else
{
document.getElementById('message').innerText = '';
document.getElementById(nom_controle).style.border = '#333 1px solid';
b_mp=true;
}
}
else if(longueur <4 || document.getElementById(nom_controle).value == txt_defaut)
{
document.getElementById(nom_controle).style.border = '#CC3300 2px solid';

switch(nom_controle)
{
case 'nom':
b_nom=false;
break;
case 'prenom':
b_prenom = false;
break;
case 'date_n':
b_date = false;
break;
case 'mail_inscr':
b_mail=false;
break;
case 'mp_inscr':
b_mp=false;
break;
}
}
else
{
document.getElementById(nom_controle).style.border = '#333 1px solid';

switch(nom_controle)
{
case 'nom':
b_nom=true;
break;
case 'prenom':
b_prenom=true;
break;
}
}
}

Il ne reste plus qu'à libérer la ligne Javascript permettant de poster la page.

document.getElementById('inscription').submit();

Celle-ci se rechargeant pourrait tester l'existence des données transmises par un code PHP, selon une instruction exemple suivante :

If(isset($_POST[nom]))
{

}

Ce test consiste à vérifier que l'information saisie dans le contrôle Input nom est connue. Alors un traitement serveur d'inscription en base de données serait engagé. Nous y reviendrons dans les formations sur la programmation des applications client-serveur pour le Web.