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`) :

```javascript
function verifResa()
{
var ch1 = document.fr.codeSalle.value;
var ch2 = document.fr.nbPlaces.value;
var ch3 = document.fr.creneau.options;
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.

Legacy. Style non strict (`var` optionnel, messages sans accents comme dans le corrigé Helali) = fidélité au corrigé d’examen, pas un guide de style ES202x.

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

```javascript
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

```javascript
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.