Discussion :

[yoshï]

Bonjour à tous,

J'attaque un gros projet web et je suis un néophyte complet dans le domaine . J'essaie de me former rapidement mais je pense que vais devoir vous embêter assez régulièrement .

Le premier problème que je rencontre concerne l'utilisation des expressions régulières en Js. Je veux vérifier les champs d'un formulaire de contact avant l'envoi d'un mail.

J'ai récupéré un script jQuery que j'ai modifié pour faire une première vérification avant l'envoi des données du formulaire vers le serveur. Il me faut vérifier que les champs requis ont bien été remplis et que les champs Email et téléphone soient valides:

voici le script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
jQuery(document).ready(function(){
	jQuery.fn.formValidation = function(settings, err_msgs) {
 
	var formulaire = this;
	var err_list = '';
 
	settings = jQuery.extend({
		email				:	/^([\w.])+\@(([\w])+\.)[a-zA-Z0-9]{2,}/,
		phone				:	/^[\s()+-]*([0-9][\s()+-]*){6,20}$/gi,
		enable				: 	false,
		err_class			: 	"invalidInput",
		err_list			: 	false,
		alias				:	'name',
		defval				: 	'defval',
		err_message			: 	"<strong>Merci de bien remplir tous les champs mentionn&eacute;s!</strong>",
		display_alert		:	true	//onsubmit if invalid form display an error message
	}, settings);
 
	err_msgs = jQuery.extend({ 
		required		: 'est requis',
		mask			: 'est un champ invalide',
		equal			: 'est différent de'
	}, err_msgs);
 
 
 
	return formulaire.submit( function () {
 
		settings['enable'] = true;
		err_list = '';
		var frm = true;
		jQuery(this).find('*').filter("input, select, textarea").each(function() {
			ret = isValid(jQuery(this));
			if (!ret) frm = ret;
		});
 
 
		if (!frm && settings['display_alert']){
			jQuery("form .error").html(settings['err_message'] + err_list);
			if (jQuery("form .error").is(":hidden")) jQuery("form .error").slideDown("slow");
		}else{
			if (jQuery("#notice").is(":hidden")){ jQuery("#notice").slideDown("slow");}
		}
		return frm;
 
		}).find('*').filter("input, textarea").each(function() {
		jQuery(this).click(function() {
			isValid(jQuery(this));
		}).change(function() {
			isValid(jQuery(this));
		}).keyup(function() {
			isValid(jQuery(this));
		}).focus(function() {
			isValid(jQuery(this));
		}).blur(function() {
			isValid(jQuery(this));
		});
	});
 
 
	function isValid(obj) { // check if field is valid
		if (!settings['enable'])
			return true;
		if (required(obj) && mask(obj)) {
			obj.removeClass(settings['err_class']);
			return true;
		} else {
			obj.addClass(settings['err_class']);
			return false;
		}
	}
 
	//field is required
	function required(obj) {						
		if (!(obj.attr('required') == "true"))	//if not required return true
			return true;
		if(obj.is("input[@type=checkbox]")) {		//if checkbox and checked
			var jobj = document.getElementById(obj.attr('id'));	
			if (jobj.checked)
				return true;
		} else if((obj.is("input") || obj.is("select")) || obj.is("textarea") && (!obj.is("button"))) // if not empty
			if (obj.val() != '') return true;
 
		//Message Erreur
		if (settings['err_list'])	
			err_list += '<br />&raquo; "' + obj.attr(settings['alias']) + '" ' + err_msgs['required'] + '\n';
 
		return false;
	}
 
	//compare field to mask provided in the extend array
	function mask(obj) { 
		mask_type = obj.attr('mask');	//read mask name from input field
		if (mask_type == undefined || obj.val() == '')
			return true;
 
		mask_type = settings[obj.attr('mask')];	// get mask pattern from settings
 
		ret = mask_type.test(obj.val());			//test reg exp
		//ret1 = mask_type.exec(obj.val());		
		if (ret) return true;
 
		//Message Erreur
		if (settings['err_list'])
			err_list += '<br />&raquo; "' + obj.attr(settings['alias']) + '" ' + err_msgs['mask'] + '\n';
 
		//DEBUG	
		//console.log(obj);
		//console.log(settings[obj.attr('mask')]);
		//console.log (err_list);
 
		return false;				
	}
 
 
	};
});

Quand je clique sur le submit de mon formulaire avec un mail invalide et un numéro de téléphone valide, j'ai le message d'erreur "mail invalide" -> OK.Le problème c'est si je reclick, le message téléphone invalide apparaît. En recliquant il disparaît etc...(Le message d'erreur pour l'email reste quand à lui toujours affiché ce qui est correct)

Avec la console de debug de mon navigateur, j'observe que les valeurs transmises à la fonction mask(obj) ne change pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
mask_type : RegExp /^[\s()+-]*([0-9][\s()+-]*){6,20}$/ig
obj.attr('mask') :"phone"		
obj.val() : "0876991037"

pourtant le booléen ret renvoie true sur le premier click, false sur le suivant,true si je reclick......

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ret = mask_type.test(obj.val());

J'ai fait un fichier test javascript avec le code suivant pour tester juste l'expression régulière

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<html>
    <head>
    </head>
    <body>
 
    TEST JAVASCRIPT
 
    <script type="text/javascript">
        var chaine= prompt("Entrez un texte à tester");
        var mask= /^[\s()+-]*([0-9][\s()+-]*){6,20}$/gi
        res = mask.test(chaine);
        document.write(' -  Chaine:'+chaine+' -  mask:'+mask+'  -  resultat:'+res);
    </script> 
 
    </body>
</html>

Le test renvoie toujours true si je tapes le numéro : "0876991037".

J'avoue que je ne comprends pas le problème avec le premier script. est ce que vous avez une idée?

Merci d'avance

[Golgotha]

la variable ret ne doit pas être bien déclarée, pas de var ret = Flase; au début ?

[yoshï]

Désolé j' ai été un peu long pour répondre car j'ai eu d'autres problèmes entre temps.
Merci pour ta réponse Golgotha.

la variable ret ne doit pas être bien déclarée, pas de var ret = False;

J'ai l'impression que le problème n'est pas lié à un défaut d'initialisation.
En effet, si la valeur du champs n'est pas bonne la variable renvoie toujours false. Par contre si la valeur du champs est correcte, j'ai le problème décrit plus haut (ret renvoie false un coup sur deux).

Il y a une ligne que je ne comprends pas dans l'exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ret1 = mask_type.exec(obj.val());

J'avais commenté cette ligne car "ret1" n'est jamais appelé dans le code... J'avais donc le sentiment que la ligne ne servait à rien.
Mais quand je décommente cette ligne, je n'ai plus le problème décrit plus haut .

Est ce que vous comprenez pourquoi?
Merci pour votre aide