Controle format téléphone
Bonjour à tous,
J'attaque un gros projet web et je suis un néophyte complet dans le domaine :aie:. J'essaie de me former rapidement mais je pense que vais devoir vous embêter assez régulièrement :lol:.
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:
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é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 />» "' + 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 />» "' + 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:
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:
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:
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
