Vérifier remplissage de champs en Javascript

[Fermé]
Signaler
-
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
-
Bonjour,

J'aimerais savoir comment fait-on pour vérifier si un champs obligatoire n'est pas rempli, lors de la saisie dans un formulaire. Je cherche un bout de code en Javascript à intégrer pour le faire.

Merci d'avance pour votre réactivité!!!

4 réponses

Messages postés
200
Date d'inscription
mardi 3 mars 2009
Statut
Membre
Dernière intervention
8 janvier 2011
48
voici le code :

function verif_champ(champ)
{
if (champ == "")
{ alert("Un champ n'est pas remplie");
return false;
}
return true;
}

ensuite il suffit d'appeler cette fonction lors de l'envoi du formulaire de cette façon :

form name='from1' onsubmit='return verif_champ(document.form1.nomduchamp.value);'



(Ca vient d'un topic de Comment ca marche. )
ok je vais essayer ça tout de suite, puis je te dis si ça marche!

en tous les cas merci!!
Messages postés
200
Date d'inscription
mardi 3 mars 2009
Statut
Membre
Dernière intervention
8 janvier 2011
48
Pas de quoi.

Bonne journée
Messages postés
200
Date d'inscription
mardi 3 mars 2009
Statut
Membre
Dernière intervention
8 janvier 2011
48
Salut,

Je viens d'essayer le code donné plus haut, ça ne marche pas. pouvez m'indiquer clairement la partie du code Javascript qui doit être ds les <head> et la partie dans le corps qui doit générer le message d'alerte (la popup!).

Est-ce que le code JS doit être placé dans la page qui reçoit et traite les données du formulaire (puisque j'ai mis par "POST") ou dans la même page du formulaire???

Voici mon formulaire et là où je suis bloqué:

<?php include("header.php"); ?>
<style type="text/css">
<!--
.Style3 {font-size: x-small}
-->
</style>

<script type="text/javascript" language="Javascript" > >
function verification()
{
var erreur = false ;

if(document.inscription.nom.value == "") {
alert("Veuillez entrer votre Nom svp");
document.inscription.nom.focus();
erreur = true ;
}


if(document.inscription.email.value == "") {
alert("Veuillez entrer votre adresse email svp");
document.inscription.email.focus();
erreur = true ;
}


if(document.inscription.mot_passe.value == "") {
alert("Veuillez entrer un message svp");
document.inscription.mot_passe.focus();
erreur = true ;
}


if(document.inscription.mot_passe_confirm.value == "") {
alert("Veuillez entrer votre adresse email svp");
document.inscription.mot_passe_confirm.focus();
erreur = true ;
}

if( erreur == true)
return false;
else
return true;

}
</script>

<table id="Tableau_03" width="240" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="9" valign=top width="54" valign="top"></td>
<td valign=top>
<img src="images/hiri_03.png" width="186" height="13" alt=""></td>
</tr>
<tr>
<td valign=top>
<a href="index.php"
onmouseover="changeImages('hiri_04', 'images/hiri_04-over.png'); return true;"
onmouseout="changeImages('hiri_04', 'images/hiri_04.png'); return true;"
onmousedown="changeImages('hiri_04', 'images/hiri_04-over.png'); return true;"
onmouseup="changeImages('hiri_04', 'images/hiri_04-over.png'); return true;">
<img name="hiri_04" src="images/hiri_04.png" width="186" height="35" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="presentation.php"
onmouseover="changeImages('hiri_05', 'images/hiri_05-over.png'); return true;"
onmouseout="changeImages('hiri_05', 'images/hiri_05.png'); return true;"
onmousedown="changeImages('hiri_05', 'images/hiri_05-over.png'); return true;"
onmouseup="changeImages('hiri_05', 'images/hiri_05-over.png'); return true;">
<img name="hiri_05" src="images/hiri_05.png" width="186" height="31" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="esthetique.php"
onmouseover="changeImages('hiri_06', 'images/hiri_06-over.png'); return true;"
onmouseout="changeImages('hiri_06', 'images/hiri_06.png'); return true;"
onmousedown="changeImages('hiri_06', 'images/hiri_06-over.png'); return true;"
onmouseup="changeImages('hiri_06', 'images/hiri_06-over.png'); return true;">
<img name="hiri_06" src="images/hiri_06.png" width="186" height="31" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="musee.php"
onmouseover="changeImages('hiri_07', 'images/hiri_07-over.png'); return true;"
onmouseout="changeImages('hiri_07', 'images/hiri_07.png'); return true;"
onmousedown="changeImages('hiri_07', 'images/hiri_07-over.png'); return true;"
onmouseup="changeImages('hiri_07', 'images/hiri_07-over.png'); return true;">
<img name="hiri_07" src="images/hiri_07.png" width="186" height="30" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="livre_or.php"
onmouseover="changeImages('hiri_08', 'images/hiri_08-over.png'); return true;"
onmouseout="changeImages('hiri_08', 'images/hiri_08.png'); return true;"
onmousedown="changeImages('hiri_08', 'images/hiri_08-over.png'); return true;"
onmouseup="changeImages('hiri_08', 'images/hiri_08-over.png'); return true;">
<img name="hiri_08" src="images/hiri_08.png" width="186" height="32" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="contact.php"
onmouseover="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;"
onmouseout="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;"
onmousedown="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;"
onmouseup="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;">
<img name="hiri_09" src="images/hiri_09-over.png" width="186" height="32" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<img src="images/hiri_10.png" width="186" height="271" alt=""></td>
</tr>
<tr background="images/hiri_11.png">
<td background="images/hiri_11.png" width="186" valign=top></td>
</tr>
</table></td>
<td valign=top width=701>
<table id="Tableau_02" width="701" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/hiri_12.png" width="701" height="38" valign="top">
<div align="justify" style="padding-left:22px; padding-top:19px;" class="main">
<span class=general><b><li>Inscription</li></b></span></div>
</td>
</tr> <tr>
<td background="images/hiri_13.png" width="701" valign="top"><center>
<div align="justify" style="padding-left:22px; padding-right:22px;" class="main">

<p><br>
Vous pouvez vous inscrire en remplissant le formulaire ci-dessous!</p>
<p></p>
<div id="login_box">
<form action="inscription.php" method="post" name="inscription" class="topform" >


<table width="600" border="0" cellspacing="3" cellpadding="3">
<tr>
<td align="right" valign="middle">
<label for="inscr_login" class="bold"> <span class="Style3">Votre nom<font color="#FF0000">*</font> </span>  </label></td>
<td align="left" valign="middle" class="size11"><input name="nom" type="text" class="inputtext"id="nom" value="" size="23" maxlength="25" />
<div id="bloc_login"></div><div id="res_login"></div></td>
</tr>
<tr>
<td align="right" valign="middle">
<label for="inscr_email"><span class="Style3">Votre e-mail <font color="#FF0000">*</font></span></label>
<strong>
<label for="inscr_email"> </label>
</strong></td>
<td align="left" valign="middle"><input name="email" type="text" id="email" value="" size="23" maxlength="100" class="inputtext" /> </td>
</tr>
<tr>
<td align="right" valign="middle">
<label for="inscr_password" class="bold"><span class="Style3">Choisissez un mot de passe<font color="#FF0000">*</font></span>  </label> </td>
<td align="left" valign="middle"><input name="mot_passe" type="password" id="mot_passe" value="" size="23" maxlength="20" class="inputtext" /> </td>
</tr>

<tr>
<td align="right" valign="middle">
<label for="inscr_password_confirm"><span class="Style3">Confirmez votre mot de passe<font color="#FF0000">*</font></span></label>
<strong>
<label for="inscr_password_confirm">  </label>
</strong></td>
<td align="left" valign="middle"><input name="mot_passe_confirm" type="password" id="mot_passe_confirm" value="" size="23" maxlength="20" class="inputtext" /></td>

</tr>

<tr>
<td align="right"><font color="#FF0000">*</font>: <span class="Style3">Champs obligatoires</span></td>
<td align="left" valign="top"><input type="submit" value="Valider l'inscription" class="btn_type1 bold" /></td>
</tr>
</table>
</form></div>
<p> </p>
</div>
</center>
</td>
</tr>
</table>
<?php include("footer.php"); ?> // Rien à voir!!!


MERCI D'AVANCE!!!
Quelqu'un peut-il m'apporter des éclairecissement sur mon cas svp? (Voir le sujet en haut de la page!!)

Merci d'avance!!!
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
892
Bonsoir,

J'ai modifié un peu ta fonction et il te manquait onSubmit dans <form ....

<?php include("header.php"); ?>
<style type="text/css">
<!--
.Style3 {font-size: x-small}
-->
</style>
<head>
<script type="text/javascript" language="Javascript" > >
function verification()
{


if(document.inscription.nom.value == "") {
alert("Veuillez entrer votre Nom svp");
document.inscription.nom.focus();
return false; ; //si pas bon on return false et on sort de la fonction et le formulaire ne sera pas envoyé

}


if(document.inscription.email.value == "") {
alert("Veuillez entrer votre adresse email svp");
document.inscription.email.focus();
return false; ;

}


if(document.inscription.mot_passe.value == "") {
alert("Veuillez entrer un message svp");
document.inscription.mot_passe.focus();
return false; ;

}


if(document.inscription.mot_passe_confirm.value == "") {
alert("Veuillez entrer votre adresse email svp");
document.inscription.mot_passe_confirm.focus();
return false; ;
}

//si tout bon on return true donc le formulaire sera envoyé
return true;

}
</script>
</head>
<body>
<table id="Tableau_03" width="240" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="9" valign=top width="54" valign="top"></td>
<td valign=top>
<img src="images/hiri_03.png" width="186" height="13" alt=""></td>
</tr>
<tr>
<td valign=top>
<a href="index.php"
onmouseover="changeImages('hiri_04', 'images/hiri_04-over.png'); return true;"
onmouseout="changeImages('hiri_04', 'images/hiri_04.png'); return true;"
onmousedown="changeImages('hiri_04', 'images/hiri_04-over.png'); return true;"
onmouseup="changeImages('hiri_04', 'images/hiri_04-over.png'); return true;">
<img name="hiri_04" src="images/hiri_04.png" width="186" height="35" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="presentation.php"
onmouseover="changeImages('hiri_05', 'images/hiri_05-over.png'); return true;"
onmouseout="changeImages('hiri_05', 'images/hiri_05.png'); return true;"
onmousedown="changeImages('hiri_05', 'images/hiri_05-over.png'); return true;"
onmouseup="changeImages('hiri_05', 'images/hiri_05-over.png'); return true;">
<img name="hiri_05" src="images/hiri_05.png" width="186" height="31" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="esthetique.php"
onmouseover="changeImages('hiri_06', 'images/hiri_06-over.png'); return true;"
onmouseout="changeImages('hiri_06', 'images/hiri_06.png'); return true;"
onmousedown="changeImages('hiri_06', 'images/hiri_06-over.png'); return true;"
onmouseup="changeImages('hiri_06', 'images/hiri_06-over.png'); return true;">
<img name="hiri_06" src="images/hiri_06.png" width="186" height="31" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="musee.php"
onmouseover="changeImages('hiri_07', 'images/hiri_07-over.png'); return true;"
onmouseout="changeImages('hiri_07', 'images/hiri_07.png'); return true;"
onmousedown="changeImages('hiri_07', 'images/hiri_07-over.png'); return true;"
onmouseup="changeImages('hiri_07', 'images/hiri_07-over.png'); return true;">
<img name="hiri_07" src="images/hiri_07.png" width="186" height="30" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="livre_or.php"
onmouseover="changeImages('hiri_08', 'images/hiri_08-over.png'); return true;"
onmouseout="changeImages('hiri_08', 'images/hiri_08.png'); return true;"
onmousedown="changeImages('hiri_08', 'images/hiri_08-over.png'); return true;"
onmouseup="changeImages('hiri_08', 'images/hiri_08-over.png'); return true;">
<img name="hiri_08" src="images/hiri_08.png" width="186" height="32" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<a href="contact.php"
onmouseover="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;"
onmouseout="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;"
onmousedown="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;"
onmouseup="changeImages('hiri_09', 'images/hiri_09-over.png'); return true;">
<img name="hiri_09" src="images/hiri_09-over.png" width="186" height="32" border="0" alt=""></a></td>
</tr>
<tr>
<td valign=top>
<img src="images/hiri_10.png" width="186" height="271" alt=""></td>
</tr>
<tr background="images/hiri_11.png">
<td background="images/hiri_11.png" width="186" valign=top></td>
</tr>
</table></td>
<td valign=top width=701>
<table id="Tableau_02" width="701" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/hiri_12.png" width="701" height="38" valign="top">
<div align="justify" style="padding-left:22px; padding-top:19px;" class="main">
<span class=general><b><li>Inscription</li></b></span></div>
</td>
</tr> <tr>
<td background="images/hiri_13.png" width="701" valign="top"><center>
<div align="justify" style="padding-left:22px; padding-right:22px;" class="main">

<p><br>
Vous pouvez vous inscrire en remplissant le formulaire ci-dessous!</p>
<p></p>
<div id="login_box">
<form action="inscription.php" method="post" name="inscription" class="topform" onSubmit="return verification();">


<table width="600" border="0" cellspacing="3" cellpadding="3">
<tr>
<td align="right" valign="middle">
<label for="inscr_login" class="bold"> <span class="Style3">Votre nom<font color="#FF0000">*</font> </span>  </label></td>
<td align="left" valign="middle" class="size11"><input name="nom" type="text" class="inputtext"id="nom" value="" size="23" maxlength="25" />
<div id="bloc_login"></div><div id="res_login"></div></td>
</tr>
<tr>
<td align="right" valign="middle">
<label for="inscr_email"><span class="Style3">Votre e-mail <font color="#FF0000">*</font></span></label>
<strong>
<label for="inscr_email"> </label>
</strong></td>
<td align="left" valign="middle"><input name="email" type="text" id="email" value="" size="23" maxlength="100" class="inputtext" /> </td>
</tr>
<tr>
<td align="right" valign="middle">
<label for="inscr_password" class="bold"><span class="Style3">Choisissez un mot de passe<font color="#FF0000">*</font></span>  </label> </td>
<td align="left" valign="middle"><input name="mot_passe" type="password" id="mot_passe" value="" size="23" maxlength="20" class="inputtext" /> </td>
</tr>

<tr>
<td align="right" valign="middle">
<label for="inscr_password_confirm"><span class="Style3">Confirmez votre mot de passe<font color="#FF0000">*</font></span></label>
<strong>
<label for="inscr_password_confirm">  </label>
</strong></td>
<td align="left" valign="middle"><input name="mot_passe_confirm" type="password" id="mot_passe_confirm" value="" size="23" maxlength="20" class="inputtext" /></td>

</tr>

<tr>
<td align="right"><font color="#FF0000">*</font>: <span class="Style3">Champs obligatoires</span></td>
<td align="left" valign="top"><input type="submit" value="Valider l'inscription" class="btn_type1 bold" /></td>
</tr>
</table>
</form></div>
<p> </p>
</div>
</center>
</td>
</tr>
</table>
</body>
<?php include("footer.php"); ?> // Rien à voir!!!