Exemple de vérification de formulaire

Cet exemple illustre la mise en place de gestions d'événement par les attributs ' onMouseOut ' et ' onSubmit ' qui permettent de faire appel à des fonctions écrites par le programmeur en Javascript. On réalise également que l'envoi du formulaire peut être annulé s'il n'est pas rempli de façon satisfaisante.

Voici un petit formulaire de saisie du nom et de l'age de l'internaute. On vérifie:
  1. le champ nom doit être renseigné.
  2. on vérifie que l'age fourni est un nombre positif !
Pour montrer des possibilités différentes, les vérifications sur le formulaire sont effectuées, l'une en quittant un champ -cf. attribut onMouseOut de la balise INPUT-, et l'autre à l'envoi du formulaire -cf. attribut onSubmit de la balise FORM-.
Les vérifications effectuées portent sur:
  1. le champ age qui doit être numérique, avec une valeur positive. La vérification est effectuée quand on quitte le champ, par l'appel de la fonction verifAge():
    voir dans la balise INPUT: onMouseOut='verifAge(this)'.
    Remarquez que le nombre de caractères à saisir est de 2 au maximum d'après la valeur de l'attribut size="2" ; on limite donc à 99 le nombre saisi.
  2. le champ nom, qui doit être renseigné.
    Cette vérification se fait par l'appel   return verifForm(this) à l'envoi du formulaire.
    Remarquez que lorsque la valeur renvoyée est false le formulaire n'est pas envoyé! Cela évite un accès au serveur par le réseau quand on sait déjà que les informations fournies ne sont pas exploitables.

Quand une erreur est décelée, un appel à la fonction alert permet d'afficher un message dans une boîte de dialogue. On pourra observer de plus qu'un message est placé dans la barre d'état du navigateur si le champ 'nom' n'est pas renseigné à l'envoi du formulaire.

Testez le formulaire ! texte HTML
Votre nom:    
Votre age:    
<form name="xpl" action="#" onSubmit="return verifForm(this)"> Votre nom: &nbsp; &nbsp; <input type="text" name="nom"> <br>Votre age: &nbsp; &nbsp; <input type="text" value="19" maxlength="2" size="2" name="age" onMouseOut='verifAge(this)'> <br><input type="submit" value="Envoi"> </form>

Le texte des fonctions utilisées est présenté ci-dessous. On peut y voir un exemple d'utilisation de l'objet 'window.defaultStatus'.

la fonction verifAge la fonction verifForm 
function verifAge(obj) {
  var ret=false
  var n=Number.NaN;
  var chn=obj.value;
  if(chn.search(/^\s*[+-]?\d+\s*$/)==-1) {
     alert("Tapez un nombre"); obj.focus(); 
     }
  else {
     n=parseInt(obj.value);
     if(n < 1)	{ alert("Tapez un nombre entre 1 et 99"); obj.focus();}
     else ret=true
    }
  return ret
  }

function verifForm(obj) {
   var chNom=obj.nom.value;
   var ret=true;
   if(chNom.length==0) {
      alert('Donnez votre nom, s.v.p.')
      window.defaultStatus='Nom obligatoire'
      ret=false
      }
		else { window.defaultStatus=''
         ret = verifAge(obj.age)
         }
   return ret;
   }