Comment obliger le surfeur à remplir les champs d'un formulaire
 

Exemple de formulaire:


Nom:

Prénom:
E-mail:
 

Le formulaire en HTML:

Faisons bien attention à mettre un nom à chaque input du formulaire:
A joutons ensuite une action lorsqu'on clique sur le bouton 'Submit' : onSubmit="return verif_formulaire()

<body>
<form name="form1" method="post" action="" onSubmit="return verif_formulaire()">

Nom: <input name="nom" type="text">
Prénom: <input name="prenom" type="text">
E-mail: <input name="email" type="text">
<input type="submit" name="Submit">

</form>
</body>

Je n'ai volontairement pas mis d'action sur le formulaire puisque ce n'est pas le sujet du tutoriel.
Plaçons enfin l'action que javascript aura à exécuter lorsque nous cliquerons sur le bouton 'Submit'
Ce script doit être placé entre les balises <head></head>


<script type="text/javascript">
<!--
function verif_formulaire()
{
if(document.form1.nom.value == "") {
alert("Veuillez entrer votre nom!");
document.form1.nom.focus();
return false;
}
if(document.form1.prenom.value == "") {
alert("Veuillez entrer votre prénom!");
document.form1.prenom.focus();
return false;
}
if(document.form1.email.value == "") {
alert("Veuillez entrer votre adresse E-mail!");
document.form1.email.focus();
return false;
}
if(document.form1.email.value.indexOf('@') == -1) {
alert("Veuillez entrer une adresse email correcte!");
document.form1.email.focus();
return false;
}
}
//-->
</script>

Explications:

Ma fonction s'appelle 'verif_formulaire'
function verif_formulaire()

Mon formulaire s'appelle 'form1' comme je l'ai nommé dans sa balise html
Je met comme condition au submit du formulaire que nom, prenom et email ne soit pas vide: value==""
if(document.form1.prenom.value == "") {

ou je met comme condition au submit du formulaire que le champs email contienne un '@'
if(document.form1.email.value.indexOf('@') == -1) {

Si il est vide, javascript déclenche une alerte contenant le texte que j'ai choisi
alert("Veuillez entrer votre prénom!");

Le curseur de la souris se remet dans le champs du formulaire vide
document.form1.email.focus();

J'empêche le submit puisque les conditions ne sont pas remplies
return false;