Vérifier la validité d'un formulaire avec JavaScript
L'intégration de quelques lignes de script dans une page Web permet de vérifier la cohérence des informations saisies avec ce qui est attendu, mais aussi de contrôler que l'ensemble des champs obligatoires sont bien remplis.
Le JavaScript est un langage de script que l'on intègre dans une page HTML, et qui s'exécute côté client. Un tel code est à placer en haut de page entre les balises <head>. Ce code manipule des objets à prototype, c'est-à-dire qui ne sont pas instanciés à partir de classes.
Un code JavaScript peut permettre de contrôler la validité et la cohérence des données saisies au sein d'un formulaire Web. Voici comment.
Une première balise déclare que l'on va utiliser le langage JavaScript:
<scriptlanguage="JavaScript">
Les anciens navigateurs ne reconnaissent pas le langage de script. Pour éviter qu'ils n'affichent le code tel quel sur la page, il suffit de rajouter des balises de commentaires sur tout le code :
<!--
Le mieux est de rajouter un message d'erreur qui s'affichera
grâce aux balises <noscript> à la fin du script.
On déclare une fonction qui va être appelée pour vérifier le formulaire lorsque l'utilisateur cliquera sur le bouton "envoyer":
function verifFormulaire() {
Dans la partie HTML, il faut ajouter l'appel de fonction à la fin de la balise de formulaire :
<form name="nom_formulaire"...
onsubmit="return verifFormulaire ();">
On déclare ensuite l'ensemble des variables du formulaire (nom donné à chaque élément de saisi):
// dans le formulaire HTML : input type="radio" name="case_a_cocher"
var case_a_cocher =document.forms.nom_formulaire.case_a_cocher.value;
// dans le formulaire HTML : select name="liste_déroulante"
var liste_deroulante=document.forms.nom_formulaire. liste_déroulante.value;
// dans le formulaire HTML : textarea name="zone_texte"
var zone_texte=document.forms. nom_formulaire.zone_texte.value;
Puis on effectue des tests pour vérifier la validité de chaque donnée:
if ((document.forms. nom_formulaire.elements[0].checked==false)&& (document.forms. nom_formulaire.elements[1].checked==false)){
alert("Veuillez cocher une case");
return false;
} // vérifie que l'un des boutons radio est coché
elseif (document.forms. nom_formulaire.liste_déroulante.selectedIndex==false) {
alert("Veuillez choisir dans la liste");
return false;
} // vérifie qu'un élément est choisi dans la liste
elseif (document.forms. nom_formulaire.case_a_remplir == '') {
alert("Veuillez remplir la zone texte");
return false;
} // vérifie que la zone texte est remplie
}
//-->
</script>
N'oubliez pas le message d'alerte au cas où votre navigateur ne lirait pas le JavaScript:
<noscript>
Votre navigateur n'accepte pas le Javascript.
</noscript>
Vous pouvez vérifier toutes les saisies d'un formulaire, y compris la structure d'un e-mail. Et pour éviter les bugs, voici la liste des mots réservés en JavaScript.