11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je cherche à mettre en place une validation en javascript de mon formulaire. J'ai trouvé sur un site un code qui valide tout ça, en affichant les erreurs.
Le seul problème est que le script était paramétré avec un return false en fin de fonction, ce qui empêche la soumission du formulaire.
Masi si je supprime ce return false; le formulaire est envoyé même si la validation n'est pas faite.

Je vous mets le morceau de code javascript, si vous pouvez détecter où se trouve l'erreur.


  $(document).ready(function() {		/* gestion du focus	/ blur */	  
	$(":input[@type!='submit']").focus(function ()	{
		$(this).removeClass();
		$(this).addClass("focus");
		$(this).parent().find(".exemple").css({display:"block"});
	});

	$(":input[@type!='submit']").blur(function	() {
		$(this).removeClass();
		$(this).addClass("normal");
		$(this).parent().find(".exemple").css({display:"none"});	 
	}); 
   
 /*effet alerte*/	  
	function alerte(e)	{
		$(e).animate({
			fontSize:"1.2em"
			}, 500,	function(){
			$(e).animate({
			fontSize:"1em"
			}, 500);
		});
		$(e).find(":input").removeClass(); $(e).find(":input").addClass("erreur");		  
		$(e).find(".exemple").css({display:"block"});	   
	}
 
 /*	controle global	*/	 
 
 $("form").submit(function(){	  
	var re1=	/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;	/*expr regul pour l'email */	 
	var re2 = /^[-]?\d*\.?\d*$/;	/*expr regul pour les chiffres*/
	var re3 = /\b.{10}\b/; /*expr	regul 10 caractres pour les numero de telephone*/

		$(":input").each(function(){			  
		 var valeur	= $(this).val(); /*	valeur saisie par l'utilisateur	*/
		 var nom = $(this).attr("name"); /*nom du champ	*/
		 var label = "l_"+nom; /* id du	label */
		 var p = $("#"+label+"").parent();			  
		 $(this).parent().find(".exemple").css({display:"none"});			 
		 if(valeur==''){ /*	si c'est vide c'est	pas	bon	*/
			alerte(p);			  
			return false;
		 } 

		 if(nom	=='mail') { /*	teste le format	 */				 
		   if(!valeur.match(re1)) {
			 alerte(p);
			 return	false;
		   }
		 } 

		 if(nom	=='telephone') { /* teste	le format (chiffes please !) */
		   if((!valeur.match(re2)) || (!valeur.match(re3)))	{
			  alerte(p);
			  return false;
		   }
		 }
	  });
 return	false;	
 });

 });

Modifié par ccsuperstar (06 Nov 2009 - 14:29)
Je vous mets également le code de mon formulaire, mais il n'y a pas d'appel particulier. J'ai bien entendu inclus la librairie jQuery.

<form action="" method="post" id="inscription">
	<p><label id="l_nom" for="nom" class="oblig" title="Veuillez saisir votre nom"> Votre Nom *</label>
	<input type="text" id="nom" name="nom" title="Veuillez saisir votre nom" tabindex="1" value="" />
	<span class="exemple">ex : Dupont</span></p>
					
	<p><label id="l_prenom" for="prenom" class="oblig" title="Veuillez saisir votre prénom"> Votre Prénom *</label>
	<input type="text" id="prenom" name="prenom" title="Veuillez saisir votre prénom" tabindex="2" value="" />
	<span class="exemple">ex : Bruno</span></p>
					
	<p><label id="l_mail" for="mail" class="oblig" title="Veuillez saisir votre adresse e-mail"> Votre E-mail *</label>
	<input type="text" id="mail" name="mail" title="Veuillez saisir votre adresse e-mail" tabindex="3" value="" />
	<span class="exemple">ex : b.dupont@xxx.fr</span></p>
				
	<p><label id="l_telephone" for="telephone" title="Veuillez saisir votre téléphone" class="oblig"> Téléphone *</label>
	<input type="text" id="telephone" name="telephone" title="Veuillez saisir votre téléphone" tabindex="4" value="" />
	<span class="exemple">ex : 0112233445</span></p>
				
	<p><label id="l_submit" for="submit" title="go"><span>Les champs marqués d'une * sont obligatoires</span></label><input id="submit" type="submit" name="envoi" value="Envoi" /></p>
</form>
Bonsoir,

EDIT: Passe par une variable tempo. Par exemple :

var tmp = true;
//le bloc each qui met tmp à false puis retourne false (
        $(":input").each(function(){
         if(nom    =='telephone') { /* teste    le format (chiffes please !) */ 
           if((!valeur.match(re2)) || (!valeur.match(re3)))    { 
              alerte(p); 
              tmp = false; // modification de tmp
              return false; 
           } 
         } 
      }); 
return tmp

Modifié par jo_link_noir (06 Nov 2009 - 22:10)