WB-BWeb et TIC

JavaScript — validation de formulaire et return false

Idée directrice

Le second lot du devoir machine TIC note les scripts de contrôle : fonctions JavaScript externes (verif1, verif2…) appelées par onsubmit="return verif…()". Chaque test invalide fait un alert puis return false pour bloquer l’envoi. Forme attestée dans i-c3-03.

Signature de reconnaissance — l'énoncé se trahit ainsi

« fonction JavaScript intitulée verif… »

« return false »

« isNaN … length »

Sujet principal

Exercice — dans l'esprit des sujets du bac

2 questionsCorrigé masqué

Page reservation.html d’une salle de conférences (contexte autonome). Formulaire name="fr" déjà écrit avec :
- input texte name="codeSalle" (4 chiffres),
- input texte name="nbPlaces" (entier > 0),
- select name="creneau" (options non présélectionnées),
- onsubmit="return verifResa()".

Dans le fichier externe controles.js, écrire la fonction JavaScript verifResa() qui :
1. refuse un code salle non numérique ou de longueur ≠ 4 ;
2. refuse un nombre de places non numérique ou ≤ 0 ;
3. refuse un créneau non choisi (selectedIndex == -1) ;
4. pour chaque erreur : alert d’un message clair puis return false.
Pourquoi return false est-il indispensable après l’alert ?

Voir la correction commentéeAprès avoir posé votre démarche

Validation JavaScript (syntaxe d’examen, fichier controles.js) :

function verifResa()
{
  var ch1 = document.fr.codeSalle.value;
  var ch2 = document.fr.nbPlaces.value;
  var ch3 = document.fr.creneau;
  if ((isNaN(ch1)) || (ch1.length != 4))
  {
    alert("le code salle doit etre un nombre de quatre chiffres");
    return false;
  }
  if ((isNaN(ch2)) || (ch2 <= 0))
  {
    alert("le nombre de places doit etre un entier strictement positif");
    return false;
  }
  if (ch3.selectedIndex == -1)
  {
    alert("vous devez choisir un creneau");
    return false;
  }
}

Rôle de return false. L’événement onsubmit="return verifResa()" n’annule l’envoi que si la fonction renvoie false. Un alert seul laisse le navigateur soumettre le formulaire vers le script PHP.

Remarque. selectedIndex se lit sur l'élément select lui-même (document.fr.creneau.selectedIndex), pas sur sa collection options. Le style non strict (var, messages sans accents) est celui des sujets du bac, pas un guide de style moderne.

Exercices d'entraînement — une nuance à la fois

Entraînement 01 / 02

Drill WB-B.1 — Contrôle d’un numéro de téléphone

1 questionCorrigé masqué

Formulaire name="ft" d’une ligne d’écoute scolaire avec un champ name="tel" (8 chiffres) et onsubmit="return verifTel()".

Écrire verifTel() qui refuse un téléphone non numérique ou de longueur ≠ 8 (alert + return false).

Voir la correction commentéeAprès avoir posé votre démarche

function verifTel()
{
  var ch = document.ft.tel.value;
  if ((isNaN(ch)) || (ch.length != 8))
  {
    alert("le telephone doit etre forme par huit chiffres");
    return false;
  }
}

Sans return false, le message s’affiche mais le submit continue.

Entraînement 02 / 02

Drill WB-B.2 — Radio obligatoire + coefficient positif

1 questionCorrigé masqué

Formulaire name="fs" d’un sondage de filière : deux radio name="filiere" (value="math", value="info") et un texte name="moyenne" (nombre > 0). onsubmit="return verifSondage()".

Écrire verifSondage() : (1) au moins un radio coché ; (2) moyenne numérique strictement positive ; sinon alert + return false.

Voir la correction commentéeAprès avoir posé votre démarche

function verifSondage()
{
  var r0 = document.fs.filiere[0].checked;
  var r1 = document.fs.filiere[1].checked;
  var m = document.fs.moyenne.value;
  if ((r0 == false) && (r1 == false))
  {
    alert("vous devez choisir une filiere");
    return false;
  }
  if ((isNaN(m)) || (m <= 0))
  {
    alert("la moyenne doit etre un nombre strictement positif");
    return false;
  }
}

Méthode / Automatismes

Lire d’abord les .value (ou .options / .checked), puis enchaîner les if.
Coupler isNaN et length quand la consigne fixe un nombre de chiffres.
Toujours terminer le cas d’erreur par return false.

Pièges classiques

Tester seulement isNaN sans la longueur (code 4 chiffres).
Oublier le cas selectedIndex == -1 sur un select multi-lignes sans sélection.
Valider côté PHP uniquement alors que la consigne exige un script JS externe.