Utilisation de JavaScript sur les formulaires

Introduction

Vous allez voir que JavaScript peut être utile dans de nombreuses situations. Jusqu’à présent, on a simplement élaboré quelques scripts isolés contenant exclusivement du code JavaScript dans le but de manipuler les objets du DOM, les méthodes, fonctions, etc.

On va maintenant combiner les deux technologies, PHP et JavaScript, afin de voir comment elles interagissent. Petit rappel, souvenez-vous que PHP est exécuté côté serveur, tandis que JavaScript agit côté client (votre navigateur).

L’exemple que l’on va voir dans les paragraphes suivants consiste à vérifier les éléments saisis dans un formulaire.

Attention, ce chapitre présente un exemple d’utilisation de PHP et de JavaScript, mais n’est en aucun cas une solution pour vérifier de manière sûre les données envoyées aux formulaires. Prenez bien conscience que JavaScript peut être désactivé dans les navigateurs, donc cela ne constitue pas un moyen de contrôler les données, mais plutôt de vérifier qu’on a du contenu quand celui-ci est obligatoire, ou de vérifier les formats des données attendues (numérique, chaînes, etc.).

Élaboration du formulaire en PHP

Vous allez constituer dans un premier temps un formulaire de base en PHP avec quelques champs que l’on retrouve dans de nombreux cas aujourd’hui. Pour s’identifier sur un site, il est courant d’avoir à renseigner un nom, un prénom, un nom d’utilisateur, un mot de passe et une adresse mail.

Le script d’élaboration de ce formulaire pourrait être celui-ci :


<html> 
    <head> 
           <title>Exemple PHP/Javascript</title> 
    </head> 
 
    <body> 
           <table cellpadding="2" cellspacing="5" 
bgcolor="#eeeeee"> 
                  <th colspan="2" align="center">Formulaire 
d'enregistrement</th> 
                  <form method="post" action="ch23_ex01.php"  
onsubmit="return controleFormulaire(this)"> 
                        <tr> 
                               <td>Nom</td> 
                               <td> 
                                      <input type="text" 
maxlength="25" name="nom"> ...

Introduction du code JavaScript

Pour contrôler ce que l’utilisateur a saisi, on va dans un premier temps ajouter du code JavaScript, qui retournera une chaîne vide si aucune erreur n’est rencontrée, sinon on affichera les erreurs à l’écran dans une fenêtre pop-up (fonction alert() de JavaScript). Dans ce cas, le formulaire est reproposé à l’utilisateur afin qu’il corrige ce qui n’est pas correct.

Si aucune erreur n’est détectée, le formulaire sera soumis au script PHP référencé dans l’attribut action de la balise form de votre code HTML (ici, chp23_ex01.php).

1. Vérifier que les champs ne sont pas vides

Les premiers contrôles à effectuer consistent à vérifier par exemple que les champs nom, prénom et mot de passe ne sont pas vides. Pour cela, une simple fonction sur chacun des deux champs peut faire l’affaire :


<script> 
 ....function controleNom(champ) { 
........return (champ == "") ? "Veuillez renseigner un nom.\n"  
: "" 
....} 
.... 
....function controlePrenom(champ) { 
........return (champ == "") ? "Veuillez renseigner un 
prenom.\n" : "" 
....} 
 
 ....function controleMdP(champ) { 
........return (champ == "") ? "Veuillez renseigner un mot de 
passe.\n" : ""  
....} 
</script>

Les trois fonctions retournent une chaîne vide s’il y a du contenu dans la variable champ passée en paramètre. Pour cela, on a utilisé une expression ternaire, qui pourrait tout aussi bien s’écrire à l’aide d’une instruction if pour rendre la lecture plus lisible :


<script> 
    function controleNom(champ) { 
          if (champ == "")  
                return "" 
          else 
                return "Veuillez renseigner un nom.\n" 
    } 
 
    function controlePrenom(champ) { 
          if (champ == "")  
          ...