11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec fichier de vérification de formulaire

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)
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.
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. Smiley cligne
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 Smiley confus .
Ça doit être tout simple mais pour un infographiste, ça devient très compliqué quand on a pas l'habitude Smiley lol
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([b][#red]function(){ ... }[/#][/b]);

Du coup ça n'a aucun impact sur la fonction du niveau du dessus, à savoir:
$("form").submit([b][#blue]function(){ ... }[/#][/b])
(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;
});
N'oublies surtout pas de faire la vérification coté serveur aussi Smiley 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).
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. Smiley 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.
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! Smiley decu Smiley bawling

Je crois que je vais mettre un formulaire en flash si ça continue... Smiley confus
Modifié par __Nianiok_43___ (28 Jan 2010 - 20:34)
Sujet clos
Aller à