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é!!!

Vérifier remplissage de champs en Javascript

Réponse 1 / 4

stefan-claes Messages postés 200 Date d'inscription mardi 3 mars 2009 Statut Membre Dernière intervention 8 janvier 2011 48
5 mars 2009 à 15:33

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. )

bab
5 mars 2009 à 15:35

ok je vais essayer ça tout de suite, puis je te dis si ça marche!

en tous les cas merci!!

Réponse 2 / 4

stefan-claes Messages postés 200 Date d'inscription mardi 3 mars 2009 Statut Membre Dernière intervention 8 janvier 2011 48
5 mars 2009 à 15:38

Pas de quoi.

Bonne journée

Réponse 3 / 4

stefan-claes Messages postés 200 Date d'inscription mardi 3 mars 2009 Statut Membre Dernière intervention 8 janvier 2011 48
5 mars 2009 à 15:40

Sinon ici:

http://www.commentcamarche.net/forum/affich 7415378 formulaire javascript verification champs

bab
5 mars 2009 à 17:55

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">

</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!!!

bab > bab
5 mars 2009 à 18:10

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

Merci d'avance!!!

Réponse 4 / 4

Alain_42 Messages postés 5358 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 902
5 mars 2009 à 18:22

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!!!

Vérifier remplissage de champs en Javascript

4 réponses

Newsletters