Ecrire une routine de validation d’un formulaire en javascript

Soit un formulaire HTML

<FORM name="MyForm">

</FORM>

Qui contient un Champ NOM

<INPUT TYPE="TEXT" NAME ="NOM">

Et un bouton de Validation

<INPUT TYPE="SUBMIT" VALUE="Envoyer">

Je veux que le formulaire ne puisse être “envoyé” que si le nom est argumenté

Je dois intervenir sur l’événement OnSubmit du formulaire

<FORM name="MyForm" onsubmit="return Validation()" 
METHOD ="POST" ACTION="page2.php">

Explication :

Si onsubmit reçoit la valeur true
1. Alors le formulaire est validé et la page2 est ouverte
2. Avec le paramètre NOM passé en argument dans l’URL
Si onsubmit reçoit la valeur false, la soumission est annulée.

Validation()

Validation est donc une routine javascript qui analyse la saisie et retourne vrai si elle est valide et faux sinon
ATTENTION javascript est un langage psychorigide (contrairement à PHP) qui ne tolère aucune fantaisie écriture !
- Majuscule/Minuscules
- Parenthèses après la fonction

Insérer un code Javascript dans une page HTML

Ou ?

Idéalement dans la section HEAD

Comment ?

Entre les Balises SCRIPT

<HEAD>

<SCRIPT language="javascript">

</SCRIPT>

</HEAD>

Structure de la routine

<SCRIPT language="javascript">

function Validation()

{

}

</SCRIPT>

function
suivi du nom de la routine (attention à la casse) Validation() et validation() se sont pas les mêmes focntions
suivi de parenthèses ()
{ équivaut à Begin = début
} à end = fin
Le point virgule ; est facultatif

Comment lit-on la valeur d’un champ de saisie ?

champ = document.MyForm.NOM

MyForm est le nom du formulaire <FORM NAME=”MyFom“>
NOM le nom du champ <INPUT NAME=”NOM“>

Routine complète :

<SCRIPT language="javascript">

function Validation()
{

with ( document.MyForm ) {
  champ = NOM.value; 
  if (champ=='') {
    alert('*** Vous devez saisir un nom! ***'); 
    NOM.focus();
    return false;
  } 
} 
return true;
}

</SCRIPT>

Explications :

Si le nom est vide
- Affiche une boite d’alerte
- Pointe le NOM vide
- Annule la validation
Sinon
- Valide le formulaire
WITH est un artifice de programmation qui optimise le travail de l’interpréteur Javascript et simplifie l’écriture :
- Au lieu d’écrire
  - document.MyForm.NOM.value;
  - document.MyForm.NOM.focus();
- Je peux simplifier en :
  - with ( document.MyForm.NOM ) {
    - champ = value;
    - focus();
  - }