Se connecter avec
S'enregistrer | Connectez-vous

Javascript : mon alerte ne se lance pas quand le formulaire n'est pas

Dernière réponse : dans Programmation

Bonjour,

J'ai un problème avec ma fonction de vérification de formulaire, qui ne se lance pas quand le formulaire est incomplet. En fait aucune alerte n'apparait quand on rempli pas les champs.

Il me manque surement quelque chose, mais je n'arrive pas à trouver quoi.... J'espere vraiment que vous pourrez m'aider.

Voici mon code actuel :


PARTIE FONCTION :


<script type="text/javascript">

// Traitement de l'insertion d'un message avec vérification des champs
//----------------------------------------------------------

// Fonctions de vérification

function Vide($Element)
{
return trim($Element) == "";
}

function is_alpha(Element)
{
pattern = /^[a-zA-Z'éèêëàâäùüûôöîïç]{1}[a-zA-Z'éèêëàâäùüûôöîïç, -]+[a-zA-Z'éèêëàâäùüûôöîïç]{1}$/
return pattern.test(Element.value)
}




function verifForm(form)
{
var msg = 'Merci bien de vouloir renseigner les champs suivants :\n';
var valide = true;
with (document) {
if (Vide(getElementById('nom')) || !is_alpha(getElementById('nom'))) {
getElementById('Lnom').className = 'erreur';
msg += '\t- le nom\n';
valide = false;
}
else {
getElementById('Lnom').className = '';
}
if (getElementById('prenom').value == '' || !is_alpha(getElementById('nom'))) {
getElementById('Lprenom').className = 'erreur';
msg += '\t- le prénom\n';
valide = false;
}
else {
getElementById('Lprenom').className = '';
}

msg += 'Les champs mals renseignés apparaissent en rouge\n';
}
if (!valide) {
alert(msg);
}
return valide;
}


</script>
</head>

<body>




PARTIE FORMULAIRE :

<form onsubmit="return verifForm(this);" method="post" action="formulaire_post.php"> <!-- methode de transmission de données utilisée: POST. Vers la page formulaire_post.php -->
<fieldset> <!-- pour mettre un contour autour du formulaire -->
<legend>EXPRIMEZ-VOUS !</legend> <!-- Ecrit sur le cadre sur formulaire -->
<p>
<label for="nom" id="Lnom">Nom :</label>
<input type="text" name="nom" id="nom" value="" />
</p>
<p>
<label for="prenom" id="Lprenom">Prénom :</label>
<input type="text" name="prenom" id="prenom" value="" />
</p>
<p>
<label for="adresse"id="Ladresse">Adresse :</label>
<textarea name="adresse" id="adresse"></textarea>
</p>
<p>
<label for="ville" id="Lville">Ville :</label>
<input type="text" name="ville" id="ville"/>
</p>
<p>
<label for="pays" id="Lpays">Pays / Province :</label>
<input type="text" name="pays" id="pays" value="" />
</p>
<p>
<label for="email" id="Lemail">email :</label>
<input type="text" name="email" id="email" value="" />
</p>
<p>
<label for="message" id="Lmessage">Votre message :</label>
<textarea name="message" id="message" rows="10" cols="50"></textarea>
</p>

</fieldset>
<p id="action"><input type="submit" name="action" value="Envoyer" /></p>
</form>


</body>
</html>


Autres pages sur : javascript alerte lance formulaire

Lassé par la pub ? Créez un compte

Excusez moi, c'est un peu dur à lire comme ça..
Je le réécris de façon plu lisible :) 

PARTIE FORMULAIRE :
  1. <form onsubmit="return verifForm(this);" method="post" action="formulaire_post.php"> 
    

  2.         <fieldset> 
    

  3.             <legend>EXPRIMEZ-VOUS !</legend>
    

  4.                <p>
    

  5.                    <label for="nom" id="Lnom">Nom :</label>
    

  6.                    <input type="text" name="nom" id="nom" value="" />
    

  7.                </p>
    

  8.                <p>
    

  9.                    <label for="prenom" id="Lprenom">Prénom :</label>
    

  10.                    <input type="text" name="prenom" id="prenom" value="" />
    

  11.                </p>
    

  12.                <p>
    

  13.                     <label for="adresse"id="Ladresse">Adresse :</label>
    

  14.                     <textarea name="adresse" id="adresse"></textarea>
    

  15.                </p>                        
    

  16.                <p>
    

  17.                     <label for="ville" id="Lville">Ville :</label>
    

  18.                     <input type="text" name="ville" id="ville"/>
    

  19.                </p>                        
    

  20.                <p>
    

  21.                      <label for="pays" id="Lpays">Pays / Province :</label>
    

  22.                      <input type="text" name="pays" id="pays" value="" />
    

  23.                </p>                        
    

  24.                <p>
    

  25.                      <label for="email" id="Lemail">email :</label>
    

  26.                      <input type="text" name="email" id="email" value="" />
    

  27.                </p>
    

  28.                <p>
    

  29.                    <label for="message" id="Lmessage">Votre message :</label>
    

  30.                     <textarea name="message" id="message" rows="10" cols="50"></textarea>
    

  31.                </p>                        
    

  32.  
  33.         </fieldset>
    

  34.         <p id="action"><input type="submit" name="action" value="Envoyer" /></p>
    

  35. </form>



PARTIE FONCTION :

  1. // Traitement de l'insertion d'un message avec vérification des champs //----------------------------------------------------------
    

  2.  
  3.  // Fonctions de vérification
    

  4.     function Vide($Element)
    

  5.      {
    

  6.          return trim($Element) == "";
    

  7.       }
    

  8.  
  9.      function is_alpha(Element)
    

  10.      {
    

  11.        pattern = /^[a-zA-Z'éèêëàâäùüûôöîïç]{1}[a-zA-Z'éèêëàâäùüûôöîïç, -]+[a-zA-Z'éèêëàâäùüûôöîïç]{1}$/
    

  12.          return pattern.test(Element.value)
    

  13.       }        
    

  14.  
  15.      function verifForm(form)
    

  16.      {
    

  17.         var msg = 'Merci bien de vouloir renseigner les champs suivants :\n';
    

  18.         var valide = true;
    

  19.         with (document) {
    

  20.               if (Vide(getElementById('nom')) || !is_alpha(getElementById('nom'))) {
    

  21.                          getElementById('Lnom').className = 'erreur';
    

  22.                           msg += '\t- le nom\n';
    

  23.                           valide = false;
    

  24.                  } 
    

  25.                  else {
    

  26.                           getElementById('Lnom').className = '';
    

  27.                          }
    

  28.              if (getElementById('prenom').value == ''  || !is_alpha(getElementById('nom'))) {
    

  29.                        getElementById('Lprenom').className = 'erreur';
    

  30.                        msg += '\t- le prénom\n';
    

  31.                        valide = false;
    

  32.                } 
    

  33.                else {
    

  34.                          getElementById('Lprenom').className = '';
    

  35.                        }
    

  36.               msg += 'Les champs mals renseignés apparaissent en rouge\n'; 
    

  37.            }
    

  38.           if (!valide) {
    

  39.                 alert(msg);
    

  40.           }
    

  41.    return valide;
    

  42.         }


Voila, je pense que c'est mieux comme ça :) 
J'espere que vous pourrez m'aider.
Je vous remercie d'avance. :) 

Petit souci :

J'ai bien avancé, en vérifiant petit à petit que ça fonctionne. J'ai augmenté le nombre de champs, et le bon message s'affiche selon les champs manquants. Avec ce code-ci :

  1. function verifForm(form)     
    

  2.      {    
    

  3.         var msg = 'blabla';    
    

  4.         var valide = true;    
    

  5.         with (document) {    
    

  6.              if (!is_alpha(getElementById('nom')) || Vide(getElementById('nom'))) { 
    

  7.                      msg += 'le nom, ';  
    

  8.                      valide = false; 
    

  9.                  } 
    

  10. 			 if (!is_alpha(getElementById('prenom')) || Vide(getElementById('prenom'))) { 
    

  11.                      msg += ' le prenom, ';  
    

  12.                      valide = false; 
    

  13.                  } 	 
    

  14. 			 if (!is_alpha(getElementById('email')) || Vide(getElementById('email'))) { 
    

  15.                      msg += 'l\'email, ';  
    

  16.                      valide = false; 
    

  17.                  } 
    

  18.  
  19. 	/*		 if (!VerifMail(getElementById('email'))) { 
    

  20.                      msg += 'email inccorect. \n';  
    

  21.                      valide = false; 
    

  22.                  } 
    

  23.         */
    

  24.  
  25. 			if (!valide) {
    

  26. 				alert(msg);
    

  27. 				}
    

  28. 			else {
    

  29. 			alert('ok');
    

  30. 				}
    

  31.        return valide;    
    

  32.            }
    

  33.       }


Mais quand j'ajoute ce que j'ai mis entre /* et */, il n'y a plus aucun message d'alerte.
Je ne comprend pas pourquoi cela empêche les messages de s'afficher, car ce n'est qu'un "if", une condition qui n'empêche pas de réaliser les instructions qui suivent en ayant bien refermer l'accolade...

Voici la fonction VerifMail :

  1. function VerifMail(form)
    

  2. {
    

  3. 	getElementById('email')
    

  4. 	var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
    

  5. 	if(reg.test(mailteste))
    

  6. 	{
    

  7. 		return(true);
    

  8. 	}
    

  9. 	else
    

  10. 	{
    

  11. 		return(false);
    

  12. 	}
    

  13. }


Je vous remercie d'avance pour votre aide.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet