probleme validation de formulaire javascript

probleme validation de formulaire javascript - HTML/CSS - Programmation

Marsh Posté le 09-06-2009 à 19:08:31    

Bonjour,
 
J'ai un petit souci lors de la validation de mon formulaire en javascript.
Si des champs sont vides, une message d'alerte le signale lorsque l'on clique sur le bouton Valider. Mais au lieu de laisser l'internaute compléter les champs vides, on le dirige vers la page suivante qui annonce à l'internaute que son formulaire a bien été envoyé.
 
Merci à celui ou ceux qui pourront m'aider ...
 
Voici ma fonction javascript suivie de mon code html.
 

Code :
  1. function ValidForm()
  2.       {
  3.             var nom = document.getElementById("Prenom_Nom" ).value;
  4.             var email = document.getElementById("Email" ).value;
  5.             var dde = document.getElementById("Texte" ).value;
  6.             var err = 0;
  7.             if(nom == "" || nom.length < 2)
  8.             {
  9.               lblNom.style.color="red";
  10.               err++;
  11.             }
  12.             else
  13.             {
  14.               lblNom.style.color="black";
  15.             }
  16.             if(email == "" )
  17.             {
  18.               lblEmail.style.color="red";
  19.               err++;
  20.             }
  21.             else
  22.             {
  23.               lblEmail.style.color="black";
  24.             }
  25.             if(dde == "" )
  26.             {
  27.               lblTexte.style.color="red";
  28.               err++;
  29.             }
  30.             else
  31.             {
  32.               lblTexte.style.color="black";
  33.             }
  34.             if(err != 0)
  35.             {
  36.               alert("Nombre de champ(s) éronné(s) : " + err + "." );
  37.             }
  38.       }


 
Code html :
 

Code :
  1. <form method="post" id="form" name="form" onsubmit="return ValidForm()" action="index.php?rub=21">
  2.   <fieldset>
  3.     <legend>Formulaire de contact</legend>
  4.     <table class="form">
  5.      <tr>
  6.          <td><label name="lblNom" id="lblNom">Nom - Prénom</label></td>
  7.      </tr>
  8.      <tr>
  9.           <td><input class="txt" type="text" name="Prenom_Nom" id="Prenom_Nom" size="34" /></td>
  10.       </tr>
  11.       <tr>
  12.           <td><label name="lblEmail" id="lblEmail">Votre email</label></td>
  13.      </tr>
  14.      <tr>
  15.           <td><input class="txt" type="text" name="Email" id="Email" size="34" /></td>
  16.         </tr>   
  17.      <tr>
  18.           <td>Sujet</td>
  19.      </tr>
  20.      <tr>
  21.           <td>
  22.             <select name="Sujet">
  23.             <option value="Renseignements">Renseignements</option>
  24.             <option value="Suggestions">Suggestions</option>
  25.             <option value="Proposer un site">Proposer un site</option>
  26.             <option value="Réactions">Réactions</option>
  27.             <option value="Envoi d'un résultat">Envoi d'un résultat</option>
  28.             <option value="Bug">Problème sur le site</option>
  29.             <option value="Autre">Autre</option>
  30.             </select>
  31.           </td>
  32.       </tr>
  33.       <tr>
  34.           <td><label name="lblTexte" id="lblTexte">Votre demande</label></td>
  35.      </tr>
  36.      <tr>
  37.           <td><textarea class="comment" name="Texte" rows="7" id="Texte" cols="70"></textarea></td>
  38.       </tr>
  39.       <tr>
  40.           <td class="center"><input type="submit" value="Envoyer au webmaster" class="submit" /></td>
  41.       </tr>
  42.     </table>
  43.   </fieldset>
  44. </form>


Message édité par oli1987 le 09-06-2009 à 19:09:17
Reply

Marsh Posté le 09-06-2009 à 19:08:31   

Reply

Marsh Posté le 09-06-2009 à 19:09:27    

Tu as oublié un return false; dans ton code, en cas d'erreur.

Reply

Marsh Posté le 09-06-2009 à 19:17:48    

De fait, grand merci :D

Reply

Marsh Posté le 09-06-2009 à 20:26:42    

Par contre, la verification fonctionne bien sous Internet Explorer mais pas sous Firefox ... Grrrr !

Reply

Marsh Posté le 09-06-2009 à 20:29:12    

Remplace les lblNom.style.qqchose par des document.getElementById comme tu le fais pour récupérer les valeurs du formulaire.  
 


---------------
Guybrush  
Reply

Marsh Posté le 09-06-2009 à 20:40:10    

Haaa nickel, ça fonctionne sur les deux ... MAIS, et oui, il y a un mais ...
 
Avant, une fois qu'on cliquait sur le message d'alert, le "label" des champs vides se mettait en rouge. Maintenant, il reste en noir ... :s
 
Logique vu que le nom du "label" n'est renvoyé nulle part, mais comment faire ?
 

Code :
  1. <script type="text/JavaScript">
  2.       function ValidForm()
  3.       {
  4.             var nom = document.getElementById("Prenom_Nom" ).value;
  5.             var email = document.getElementById("Email" ).value;
  6.             var dde = document.getElementById("Texte" ).value;
  7.             var err = 0;
  8.             if(nom == "" || nom.length < 2)
  9.             {
  10.               document.getElementById("Prenom_Nom" ).color="red";
  11.               err++;
  12.             }
  13.             else
  14.             {
  15.               document.getElementById("Prenom_Nom" ).color="black";
  16.             }
  17.             if(email == "" )
  18.             {
  19.              document.getElementById("Email" ).color="red";
  20.              err++;
  21.             }
  22.             else
  23.             {
  24.               document.getElementById("Email" ).color="black";
  25.             }
  26.             if(dde == "" )
  27.             {
  28.               document.getElementById("Texte" ).color="red";
  29.               err++;
  30.             }
  31.             else
  32.             {
  33.               document.getElementById("Texte" ).color="black";
  34.             }
  35.             if(err != 0)
  36.             {
  37.               alert("Nombre de champ(s) incomplet(s) : " + err + "." );
  38.               return false;
  39.             }
  40.       }
  41. </script>


Message édité par oli1987 le 09-06-2009 à 20:41:17
Reply

Marsh Posté le 09-06-2009 à 20:52:29    

Dans les nouveaux getElementById, tu sélectionnes les id de tes éléments du formulaire, pas les labels !
Remplace Prenom_Nom par lblNom, Email par lblEmail, etc. :)
 
Edité : et c'est getElementById(...).style.color, il manque le .style


Message édité par guybrush02 le 09-06-2009 à 20:53:05

---------------
Guybrush  
Reply

Marsh Posté le 09-06-2009 à 20:56:39    

Tout maaarche ! Un grand merci à toi guybrush02 :), merci, j'aurais appris quelque chose aujourd'hui !

Reply

Marsh Posté le 09-06-2009 à 22:46:07    

Et pour demain autre chose: http://openweb.eu.org/articles/for [...] ble/#texte
associer les étiquettes aux éléments de formulaire
<tr>
<td><label for="email">votre email :</label></td>
<td><input type="text" id="email" /></td>
</tr>
 
et
 
<table summary="">
</table>
pas faire chier les non-voyants quand on utilise encore des tableaux de présentation

Reply

Sujets relatifs:

Leave a Replay

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