Guide pratique et progressif du langage Javascript - Source validation de formulaire


<HTML><HEAD>
<SCRIPT LANGUAGE="Javascript">
<!-- ;
function init()
{
  flag=new Array(3);
  flag['Led_Nom']=false;
  flag['Led_Age']=false;
  flag['Led_Email']=false;
  document.forms[0].Nom.select();
  document.forms[0].Nom.focus();
}

function teste_vide(objet,texte,led)
{
  with (objet)
  {
    if (value==null || value=='')
    {
      document.images[led].src="led.verte.off.jpg";
      document.images['Led_Envoi'].src="led.rouge.on.jpg";
      flag[led]=false;
      if (texte!="") {alert(texte);}
      objet.select();
      objet.focus();
      return false;
    }
    else
    {
      flag[led]=true;
      document.images[led].src="led.verte.on.jpg";
      if (flag['Led_Nom']==true && flag['Led_Age']==true && flag['Led_Email']==true) {document.images['Led_Envoi'].src="led.verte.on.jpg";}
      return true;
    }
  }
}

function teste_valeur(objet,texte,min,max,led)
{
  with (objet)
  {
    checkvalue=parseInt(value);
    if ((parseInt(min)==min & checkvalue<min) || (parseInt(max)==max && checkvalue>max) || value!=checkvalue)
    {
      document.images[led].src="led.verte.off.jpg";
      document.images['Led_Envoi'].src="led.rouge.on.jpg";
      flag[led]=false;
      if (texte!="") {alert(texte);}
      objet.select();
      objet.focus();
      return false;
    }
    else
    {
      flag[led]=true;
      document.images[led].src="led.verte.on.jpg";
      if (flag['Led_Nom']==true && flag['Led_Age']==true && flag['Led_Email']==true) {document.images['Led_Envoi'].src="led.verte.on.jpg";}
      return true;
    }
  }
}

function teste_email(objet,texte,led)
{
  with (objet)
  {
    apos=value.indexOf("@");
    dotpos=value.lastIndexOf(".");
    lastpos=value.length-1;
    if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
    {
      document.images[led].src="led.verte.off.jpg";
      document.images['Led_Envoi'].src="led.rouge.on.jpg";
      flag[led]=false;
      if (texte) {alert(texte);}
      objet.select();
      objet.focus();
      return false;
    }
    else
    {
      flag[led]=true;
      document.images[led].src="led.verte.on.jpg";
      if (flag['Led_Nom']==true && flag['Led_Age']==true && flag['Led_Email']==true) {document.images['Led_Envoi'].src="led.verte.on.jpg";}
      return true;
    }
  }
}

function validation(objet)
{
  with (objet)
  {
    if (teste_vide(Nom,'Indiquez votre nom s\'il vous plait.','Led_Nom')==false) {Nom.focus(); return false;};
    if (teste_valeur(Age,'L\'indication de l\'age est obligatoire.',7,77,'Led_Age')==false) {Age.focus(); return false;};
    if (teste_email(Email,'Vous oubliez d\'indiquer votre adresse E-Mail.','Led_Email')==false) {Email.focus(); return false;};
  }
}

function raz(objet)
{
  with (objet)
  {
    document.images['Led_Nom'].src="led.verte.off.jpg";
    flag['Led_Nom']=false;
    document.images['Led_Age'].src="led.verte.off.jpg";
    flag['Led_Age']=false;
    document.images['Led_Email'].src="led.verte.off.jpg";
    flag['Led_Email']=false;
    document.images['Led_Envoi'].src="led.rouge.on.jpg";
  }
}
// -->
</SCRIPT>
<TITLE>Mon Formulaire</TITLE>
</HEAD>
<BODY onLoad="init()">


<FORM ENCTYPE="text/plain" METHOD="POST" ACTION="mailto:xxx@yyy.zzz" onSubmit="return validation(this)">
<IMG WIDTH="29" HEIGHT="29" SRC="led.verte.off.jpg" NAME="Led_Nom" BORDER="0"> Nom: <INPUT TYPE="TEXT" NAME="Nom" SIZE="20" onChange="teste_vide(this,'Le nom manque','Led_Nom')"><BR>
<IMG WIDTH="29" HEIGHT="29" SRC="led.verte.off.jpg" NAME="Led_Age" BORDER="0"> Age: <INPUT TYPE="TEXT" NAME="Age" SIZE="4" onChange="teste_valeur(this,'L\'age manque ou est incorect (7 à 77 ans)',7,77,'Led_Age')"><BR>
<IMG WIDTH="29" HEIGHT="29" SRC="led.verte.off.jpg" NAME="Led_Email" BORDER="0"> Adresse E-Mail: <INPUT TYPE="TEXT" NAME="Email" SIZE="20" onChange="teste_email(this,'L\'adresse E-mail manque ou est incorecte','Led_Email')"><BR>
<IMG WIDTH="29" HEIGHT="29" SRC="led.violette.on.jpg" NAME="Led_reset" BORDER="0"><INPUT TYPE="RESET" VALUE="Effacement" onClick="raz(this)"><BR>
<IMG WIDTH="29" HEIGHT="29" SRC="led.rouge.on.jpg" NAME="Led_Envoi" BORDER="0"><INPUT TYPE="SUBMIT" VALUE="Envoi"><BR>
</FORM>


</BODY>
</HTML>
Pas de lien ici (utilisez le bouton de retour de votre navigateur).
Dernière mise à jour de cette page: 04/09/2001, visiteurs:
depuis le 6 avril 2002