Probleme verification champ formulaire javascript

Probleme verification champ formulaire javascript - HTML/CSS - Programmation

Marsh Posté le 25-01-2011 à 17:47:42    

Bonjour,  
 
Je rencontre un probleme sur mon formulaire que lequel j'aimerais avoir une verification des champ.
 
Il y a 4 champs :  
-Sujet  
-Enseigne
-Adresse
-E-mail.
 
 
Mon probleme: la fenetre affichant le message comme quoi le champ n'est pas bien rempli s'affiche bien, mais la page passe tout de meme a la suivante, donc le bouton submit n'est pas stoppé pour que l'internaute remplisse les données manquantes.
 
 
Comment y remedier?
 
Merci d'avance.
 
Ci dessous mon code formulaire avec  javascript.
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demande de Tarif en ligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles2.css" rel="stylesheet" type="text/css" />
 
<script language="JavaScript">
 
 function checkBlank(input,msg)
 {
   
   if (input.value == null || input.value.length == 0) {
  alert ("Il faut remplir les champs Adresse et Email" );
  return false;
   }  
   return true;
 }
 function checkForm(Contact)
 {
   if (
    !checkBlank(Contact.adresse) ||
    !checkBlank(Contact.e-mail)) {
  return false;
   } else  
   Contact.submit();
  alert ("Merci , la page de tarifs en ligne s'affichera dans quelques instants ..." );
   return true;
 }
</script>
 
 
</head>
 
<body class="formulaires">
 
<div id="wrapper">
 
 <div id="header">
 
   <h1></h1>
 
  </div>
   
 <div id="middle">
   
    <div id="content">
       
      <h2>DEMANDE DE TARIF EN LIGNE</h2>
 
      <div id="content-middle">
               
        <form method="post" action="traitement.php">
         
        <fieldset><legend>Veuillez remplir le formulaire ci dessous</legend>
          <p><label for="sujet">Nom</label><input type="text" name="sujet" value="" /></p>
          <p><label for="enseigne">Enseigne</label><input type="text" name="enseigne" value="" /></p>
          <p><label for="adresse">Adresse complete</label><textarea name="adresse"></textarea></p>
           <p><label for="e-mail">Adresse Mail</label><input type="text" name="e-mail" value=""></p>
        </fieldset>
       
         
        <div id="input">
         
       <p><input type="reset" value="Réinitialiser le formulaire" /><input type="submit" value="Valider" onclick="checkForm(this.form)"/></p>
       
      </div>
       
        </form>
       
      </div><!--content-middle-->
 
      <div id="content-bottom"></div>
     
    </div><!--content-->
 
 </div>
 
</div>
 
</body>
</html>


Message édité par masquelier le 01-02-2011 à 10:09:43
Reply

Marsh Posté le 25-01-2011 à 17:47:42   

Reply

Marsh Posté le 25-01-2011 à 18:59:05    

Bonjour,
 

Code :
  1. <form method="post" action="traitement.php" onSumit="checkForm(this.form); return(false)">
  2. (...)
  3. <input type="submit" value="Valider"/>


 
?


---------------
:o
Reply

Marsh Posté le 26-01-2011 à 09:38:52    

Hello !
Merci pour ton aide : )
J'ai essayer mais sans resultats :(

 

Avec du recul j'ai pu corrigé mon code et désormais TOUT FONCTIONNE !!

 

Le seul probleme: lors de la déclaration du DOCTYPE plus rien en fonctionne, il semblerais que j'utilise donc le mauvais ? Ou bien qu'il y ait une incompatibilité entre le DOCTYPE et le code ?

 

Je fourni le code pour aider les prochains :)

  

<html>
<head>
<link href="styles2.css" rel="stylesheet" type="text/css" />

 


<script language="Javascript">
function verif()

 

{

 


if(formulaire.sujet.value =='') // si tous les champs sont vides! affiche l'alerte!
{
alert('Merci de saisir votre Nom !');
return false;
}

 

if(formulaire.enseigne.value =='') // s'il manque le enseigne, affiche l'alerte !
{
alert('Merci de saisir votre Enseigne!');
return false;
}

 

if(formulaire.adresse.value =='') // s'il manque le adresse, affiche l'alerte !
{
alert('Merci de saisir votre Adresse!');
return false;
}

 


if(formulaire.adresse.value.length <= 15) {
alert("Veuillez entrer votre adresse de livraison COMPLETE" );
return false;
}

 


if(formulaire.mail.value =='') // s'il manque le mail, affiche l'alerte !
{
alert('Merci de saisir votre e-mail!');
return false;
}

 


if(formulaire.mail.value.indexOf('@') == -1)
{
alert("Ce n'est pas une adresse mail valable!" );
return false;
}

 


}
</script>

 

</head>
<body class="formulaires">
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<div id="middle">
<div id="content">
<h2>DEMANDE DE TARIF EN LIGNE</h2>
<div id="content-middle">
<form action="traitement.php" method=POST name="formulaire" onSubmit="return verif()">

 

<fieldset><legend>Veuillez remplir le formulaire ci dessous</legend>
<p><label for="sujet">Nom</label><input type="text" name="sujet" value="" /></p>
<p><label for="enseigne">Enseigne</label><input type="text" name="enseigne" value="" /></p>
<p><label for="adresse">Adresse complete</label><textarea name="adresse" ></textarea></p>
<p><label for="mail">Adresse Mail</label><input type="text" name="mail" value=""></p>
</fieldset>

 

<p><input type="reset" value="Reinitialiser le formulaire" /><input type="submit" value="Valider" /></p>
</form>
<div id="input"> </div>

 

</form>
</div><!--content-middle-->
<div id="content-bottom"></div>
</div><!--content-->
</div>
</div>

 

</body>
</html>


Message édité par masquelier le 01-02-2011 à 10:10:16
Reply

Marsh Posté le 26-01-2011 à 14:52:55    

Un conseil, tu devrais combiner les alert pour qu'il obtienne tous les messages d'erreur en 1 :)


Message édité par Ydalb le 26-01-2011 à 14:53:21

---------------
:o
Reply

Marsh Posté le 26-01-2011 à 14:58:49    

Merci , je ne savais pas que l'on pouvait les combiner ....
Je ne trouve pas grand chose sur le net  à ce sujet .. :/

Reply

Marsh Posté le 26-01-2011 à 15:06:28    

Tu fais du genre :

Code :
  1. var erreur = ''
  2. if (<condition erreur 1> )
  3. {
  4.   var erreur .= 'blabla\n\n'
  5. }
  6. if (<condition erreur 2> )
  7. {
  8.   var erreur .= 'blabla2\n\n'
  9. }
  10. (...)
  11. if (erreur != '')
  12. {
  13.   alert(erreur)
  14.   return false
  15. }
  16. else
  17.   return true



---------------
:o
Reply

Marsh Posté le 26-01-2011 à 16:37:38    

Ok merci :jap:
En gros je fais desormais appel a une variable et non plus une fonction?
 
J'ai du mal a decrypter tout ca mais je vais faire de mon mieux .. :)

Reply

Marsh Posté le 26-01-2011 à 18:24:23    

En fait, dans ta fonction verif(), tu t'arrêtais à la première erreur pour afficher une alerte et renvoyer faux.
 
Du coup, si une personne ne renseigne pas le sujet ET l'enseigne, il reçoit une pop-up avec juste 'Merci de saisir votre Nom !', et aucun message pour l'enseigne.
 
Avec ma solution, il recevra :
 
"Merci de saisir votre nom !
Merci de saisir votre Enseigne!"
 
 
C'est plus clair ?


---------------
:o
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed