Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» JavaScript et DOM
» Problème avec fichier de vérification de formulaire
Auteur
__Nianiok_43___
# 19 Jan 2010 - 13:03:32
Citer
11 Posts
 Salut à tous.
Comme je l'ai déjà dit dans la partie XHTML CSS, j'ai un soucis avec un formulaire.

J'ai a peu prêt tout résolu, mais persiste encore le soucis du fichier de vérification, et je ne suis pas calé en prog donc je galère un peu!

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



		}, 150, function(){

	

			$(e).animate({



				fontSize:"1em"



			}, 150);



		});



		$(e).find("input").removeClass(); $(e).find("input").addClass("erreur");



		$(e).find(".exemple").css({display:"block"});



	}



       



      /* contrôle 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*/



       

		$(":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 =='eMail') { /* teste le format  */



				if(!valeur.match(re1)) {



					alerte(p);



					return false;

	

				}



			}



			if(nom =='tel') { /* teste le format (chiffes please !) */



				if((!valeur.match(re2)) || (!valeur.match(re3))) {



					alerte(p);



					return false;



				}



			}



		});



		return false;



	});



});


Si quelqu'un voit ce qui empêcherait mon bouton submit de fonctionner lorsque toutes les conditions sont réunies, qu'il m'en fasse part, ça serait super.

ps: Le formulaire en question est ici si ça peut vous aider

Merci d'avance.
Modifié par __Nianiok_43___ (19 Jan 2010 - 13:41)
http://nianiokdesign.free.fr msn 
^
Mikachu
# 19 Jan 2010 - 13:31:42
Citer
C'est quand les vacances ?
Modérateur
4298 Posts
 Bonjour aussi...
Une page en ligne ou au moins l'intégralité du code html et css ça aide à vous aider plus vite !
http://www.mikachudesign.com/ 
^
__Nianiok_43___
# 19 Jan 2010 - 13:43:54
Citer
11 Posts
 Ouais, j'ai oublié de marquer Bonjour, c'est corrigé, mais le reste niveau politesse était là.
C'est juste que je sortais de mon autre topic et que ça m'est sortit de la tête de re-dire bonjour ici, désolé pour ce manque d'inattention.
http://nianiokdesign.free.fr msn 
^
Florent V.
# 19 Jan 2010 - 14:04:50
Citer
Administrateur
17089 Posts
 Bonjour,

__Nianiok_43___ a écrit :
Si quelqu'un voit ce qui empêcherait mon bouton submit de fonctionner lorsque toutes les conditions sont réunies, qu'il m'en fasse part, ça serait super.

OK, en fait c'est plutôt simple.

Lors de l'envoi du formulaire, tu exécute une fonction JavaScript avec les étapes suivantes:

1. Préparer quelques expressions régulières à utiliser plus tard.
2. Pour chaque champ, faire une série de tests (certains s'appliquant à un champ précis uniquement). Lorsqu'un test n'est pas vérifié, tu appelles une fonction pour afficher un message d'erreur et tu sors de ta fonction avec un return false.
3. Dernière étape, tu termines par un return false.

C'est le troisième point qui pose problème. Il a deux conséquences:
- il interrompt la fonction;
- il dit au navigateur de bloquer l'envoi du formulaire.

CQFD. cligne

http://fvsch.com 
^
__Nianiok_43___
# 19 Jan 2010 - 14:16:04
Citer
11 Posts
 Ok et merci de ton aide!
Dans ce cas là, ça fonctionne en effet, mais du coup, lorsque je clic sur le bouton submit, la vérification des champs n'est plus faite, enfin si elle est faite, mais même si les champs ne sont pas remplis, le mail est quand même envoyé...

Du coup on résout un problème en en créant un autre j'ai l'impression confus .
Ça doit être tout simple mais pour un infographiste, ça devient très compliqué quand on a pas l'habitude lol

http://nianiokdesign.free.fr msn 
^
__Nianiok_43___
# 20 Jan 2010 - 12:36:39
Citer
11 Posts
 UP rolleyes

http://nianiokdesign.free.fr msn 
^
Florent V.
# 23 Jan 2010 - 19:34:25
Citer
Administrateur
17089 Posts
 Je suis pas callé en return en JavaScript. Tu as des return false pour chaque condition non remplie, mais je ne sais plus si leur portée se limite à la condition (if) ou va jusqu'à la fonction parente.

Dans le deuxième cas, ça veut dire que la fonction pour laquelle tu retourne "false" est la suivante:
$(":input").each(function(){ ... });

Du coup ça n'a aucun impact sur la fonction du niveau du dessus, à savoir:
$("form").submit(function(){ ... })
(c'est cette fonction en bleu qui devrait retourner "false" en cas de test échoué, si je comprend bien)

Solution éventuelle (pas testée):
$("form").submit(function(){

 

  var re1 = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

  var re2 = /^[-]?\d*\.?\d*$/;

  var re3 = /\b.{10}\b/;

  var valide = true;



  $(":input").each(function(){

    var valeur = $(this).val();

    var nom = $(this).attr("name");

    var label = "l_"+nom;

    var $p = $("#"+label).parent();



    $(this).parent().find(".exemple").css({display:"none"});

    

    if(valeur==''){

      alerte($p);

      valide = false;

    }

    if(nom=='eMail') {

      if(!valeur.match(re1)) {

        alerte(p);

        valide = false;

      }

    }

    if(nom =='tel') {

      if((!valeur.match(re2)) || (!valeur.match(re3))) {

        alerte(p);

        valide = false;

      }

    }

  });

  return valide;

});
http://fvsch.com 
^
__Nianiok_43___
# 24 Jan 2010 - 23:47:25
Citer
11 Posts
 Merci, je teste ça demain et te tiens au jus! cligne

http://nianiokdesign.free.fr msn 
^
rs459
# 25 Jan 2010 - 10:53:59
Citer
41 Posts
 N'oublies surtout pas de faire la vérification coté serveur aussi cligne

Car si c'est bien pratique pour l'utilisateur de le faire en javascript et de ne pas avoir a se retaper tout le formulaire en cas d'erreur , ca n'est qu'une solution de confort pour l'utilisateur, ca n'apporte aucune sécurité puisque le javascript peut être désactivé, et dans ce cas précis tu fais passer ce tu veux au formulaire (SQL injection notamment).
^
Florent V.
# 25 Jan 2010 - 21:47:50
Citer
Administrateur
17089 Posts
rs459 a écrit :
Car si c'est bien pratique pour l'utilisateur de le faire en javascript et de ne pas avoir a se retaper tout le formulaire en cas d'erreur (...)

En fait cet aspect aussi se gère très bien côté serveur. smile

Le seul intérêt d'une surcouche de validation en JavaScript est de fournir une information plus rapidement suite à une saisie dans un champ donné (ça va, ça va pas), sans attendre que l'utilisateur envoie le formulaire.

Et +1000 pour faire toutes les vérifications nécessaires et prendre des mesures de sécurité côté serveur.
http://fvsch.com 
^
__Nianiok_43___
# 28 Jan 2010 - 20:33:11
Citer
11 Posts
 Salut et désolé de ne donner de mes nouvelles que maintenant mais j'ai planché sur la partie graphique de mon site qui est + mon domaine et je viens de tester à l'instant la partie de code différente mas rien à faire, ça ne veut pas fonctionner! decu bawling

Je crois que je vais mettre un formulaire en flash si ça continue... confus
Modifié par __Nianiok_43___ (28 Jan 2010 - 20:34)
http://nianiokdesign.free.fr msn 
^
__Nianiok_43___
# 09 Feb 2010 - 14:22:13
Citer
11 Posts
 Personne n'aurait une autre idée ?! confused
Modifié par __Nianiok_43___ (09 Feb 2010 - 14:22)
http://nianiokdesign.free.fr msn 
^
Prévenir un modérateur
Répondre au sujet
Aller à
Powered by Phedio v3.8.6 beta in 9.1 ms © dew