L'exemple de formulaire présenté ici contient deux zones de texte et un bouton.
La première zone de texte doit impérativement contenir quatre chiffres.
La deuxième doit être l'écriture d'un nombre décimal positif comprenant éventuellement un '.'.
Si ces deux conditions ne sont pas vérifiées, le formulaire n'est pas validé et un message d'erreur s'affiche.
Les composants du formulaires sont englobées dans une balise form définie comme suit:
<form action="NombresValides.html"
onsubmit="return Verifier()">
C'est donc la fonction Verifier qui pourra empêcher ou autoriser l'appel de la page NombresValides.html.
A l'intérieur du formulaire (entre <form> et </form>) on trouve un tableau dans lequel sont répartis les différents composants du formulaire.
La première zone de texte est identifié par M11:
<input type="text" id="M11" >
La seconde par PI:
<input type="text" id="PI" >
Enfin, le bouton Ok a été défini en type "submit" afin qu'un clic sur celui-ci déclenche l'évènement submit du formulaire:
<input type="submit" value="Ok">
La page de validation (Exemple/NombresValides.html) contient simplement l'affichage du message Vos réponse sont en cours d'évaluation ...:
<h2>Vos réponse sont en cours d'évaluation ...</h2>
Dans le fichier javascript associé à la page Nombres.html nous trouvons trois fonctions:
function NombreDe4Chiffres (chaine)
{
var er=/^\d{4}$/;
return er.test(chaine);
}
function NombreDecimalPositif (chaine)
{
var er=/^[0-9]+(\.[0-9]*)?$/;
return er.test(chaine);
}
function Verifier ()
{
M11=document.getElementById("M11").value;
if (! NombreDe4Chiffres(M11))
{
alert ('Nombre1 incorrect!'); return false;
}
PI=document.getElementById("PI").value;
if (! NombreDecimalPositif(PI))
{
alert ('Nombre2 incorrect!'); return false;
}
return true;
}