//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // Effectue les vérifications du formulaire avant envoi function verif { //... vérifications... return true; }Cette fonction vérifie si la saisie effectuée dans le formulaire correspond au format attendu. Cette fonction sera exécutée au moment de la soumission du formulaire (clic sur le bouton "Envoyer") si la balise <form ...> contient l'attribut onsubmit="return verif();" comme par exemple ci-dessous :
<form name="inscription" method="post" action="enregistrement.php" onsubmit="return verif();">
Généralement les vérifications porteront sur chaque champ de saisie et :
Si le test d'un champ de saisie ne rencontre pas d'erreur, la vérification se poursuivra sur le champ suivant et dans le cas contraire, un message d'erreur explicatif sera affiché, le curseur sera positionné dans le champ de saisie et les tests s'arrêteront en rencontrant la valeur false. Si aucune erreur n'est rencontrée, la fonction retourne la valeur true, ce qui déclenche l'envoi du formulaire.
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // Logique générale d'un test de champ de saisie ... // vérification de la présence d'une saisie if(saisie_manquante) { alert("Vous avez oublié de saisir nom_du_champ"); document.nom_formulaire.nom_champ.focus(); return false; } // vérification de la validité de la saisie msg = isValidText(nom_du_champ, caractères_autorisés, lg_mini, lg_maxi); if(msg != "OK") { alert("Nom_du_champ :\n" + msg); document.nom_formulaire.nom_champ.focus(); return false; }Les fonctions isValid...() affectent à la variable msg le texte "OK" ou le texte d'un message explicatif de l'erreur rencontrée. Si la variable msg ne contient pas la valeur "OK", le message d'erreur est affiché, le curseur est positionné et le test retourne la valeur false, ce qui entraîne la fin des tests. Dans le cas contraire (msg = "OK") c'est que le champ est validé et l'on peut passer au test du champ suivant.
function verif() { // ----- Définition des (c)aractères (a)utorisés = ca_* pour chaque champ var ca_nom = lettres + "' -"; var ca_prenom = ca_nom; // ca_dnais = inutile, les caractères saisis sont vérifiés dans la fonction isDate() var ca_adr = chiffres + lettres + "',°- ()"; var ca_cp = chiffres; var ca_ville = lettres + " -'"; var ca_tel = chiffres + ". -+()"; var ca_mail = ascii + chiffres + "@_.-"; // ----- Récupération des valeurs du formulaire var nom = document.demo.nom.value; var prenom = document.demo.prenom.value; var dnais = document.demo.dnais.value; var adr = document.demo.adr.value; var cp = document.demo.cp.value; var ville = document.demo.ville.value; var tel = document.demo.tel.value; var mail = document.demo.mail.value; // ----- Nom. Obligatoire if(!nom) { alert("Vous avez oublié d'indiquer votre nom"); document.demo.nom.focus(); return false; } msg = isValidText(nom, ca_nom, 2, 20); if(msg != "OK") { alert("Nom :\n" + msg); document.demo.nom.focus(); return false; } // ----- Prénom. Obligatoire if(!prenom) { alert("Vous avez oublié d'indiquer votre prénom"); document.demo.prenom.focus(); return false; } msg = isValidText(prenom, ca_prenom, 2, 20); if(msg != "OK") { alert("Prénom :\n" + msg); document.demo.prenom.focus(); return false; } // ----- Date de naissance. Non obligatoire if(dnais) { msg = isValidDate(dnais); if(msg != "OK") { alert("Date de naissance :\n" + msg); document.demo.dnais.focus(); return false; } } // ----- Adresse. Obligatoire if(!adr) { alert("Vous avez oublié d'indiquer votre adresse"); document.demo.adr.focus(); return false; } msg = isValidText(adr, ca_adr, 5, 30); if(msg != "OK") { alert("Adresse :\n" + msg); document.demo.adr.focus(); return false; } // ----- Code postal. Obligatoire if(!cp) { alert("Vous avez oublié d'indiquer votre code postal"); document.demo.cp.focus(); return false; } msg = isValidText(cp, ca_cp, 5, 5); if(msg != "OK") { alert("Code postal :\n" + msg); document.demo.cp.focus(); return false; } // ----- Ville. Obligatoire if(!ville) { alert("Vous avez oublié d'indiquer votre ville"); document.demo.ville.focus(); return false; } msg = isValidText(ville, ca_ville, 2, 20); if(msg != "OK") { alert("Ville :\n" + msg); document.demo.ville.focus(); return false; } // ----- Téléphone. Non obligatoire if(tel) { msg = isValidText(tel, ca_tel, 10, 21); if(msg != "OK") { alert("Téléphone :\n" + msg); document.demo.tel.focus(); return false; } } // ----- Mail. Obligatoire if(!mail) { alert("Vous avez oublié d'indiquer votre adresse mail"); document.demo.mail.focus(); return false; } msg = isValidText(mail, ca_mail, 6, 40); if(msg != "OK") { alert("Adresse mail :\n" + msg); document.demo.mail.focus(); return false; } if(!isEmail(mail)) { alert("L'adresse mail semble incorrecte !"); document.demo.mail.focus(); return false; } alert('Fin des tests : tout est OK'+"\n"+'Le formulaire peut maintenant être sousmis'); return false; // On ne le fait pas partir : c'est juste une démo (départ: return true;) }