Discussion :

[geeka]

Bonjour,
Pour clarifier la question, j'ai un champ pays et un champ numéro de téléphone, à chaque fois que je sélectionne le pays j'ai automatiquement l'indicatif dans mon champ tél. Le problème c'est que l'indicatif est pris en compte comme étant un numéro de téléphone, comment faire pour que l'indicatif ne soit pas pris en compte comme étant un champ rempli ?



Merci

[NoSmoking]

Bonjour,
je pense qu'il faut que tu nous montres ton code pour aider à la compréhension.

[autran]

je serais assez d'accord, car je ne comprends pas si tu souhaites exclure l'indicatif du numéro final

[geeka]

Merci pour vos réponses.
Voici mon code :

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
<!-- Pays -->
<select id="countrySelect" name="country" onchange="check()">
	<?php
                $reponse = $bdd->query('SELECT * FROM pays'); 
                echo '<OPTION value="FR" selected="selected">France</OPTION>';
                while ($donnees = $reponse->fetch(PDO::FETCH_ASSOC))
                   { 
                       echo '<OPTION VALUE="'.$donnees["id_pays"].'" INDICATIF="'.$donnees["code_pays"].'"> '.$donnees["pays"].' </OPTION>';                                                                                                       
                    } 
                ?>
</select>
<!-- Téléphone -->
<input type="tel" name="tel_struct" id="tel_struct" placeholder="Téléphone générique">
<script>
setIndicatif = function(element)
{
    var indicatif = $(element).find('option:selected').attr('indicatif') ; 
        if (indicatif == undefined ) {
                $('#tel_struct').val('+(33) ');  
                
        }
        else{
                $('#tel_struct').val('+('+indicatif+') ');  
                
        }
}       
setIndicatif($('#country'));
 
$('#countrySelect').on('change', function() {
    setIndicatif(this);
});
</script>

Je souhaite que l'indicatif apparaisse toujours mais qu'il ne soit pas enregistré comme étant un bon numéro de téléphone. En fait, je n'ai pas de condition sur la syntaxe du numéro de téléphone à part qu'il est obligatoire, mais avant d'écrire une condition, je souhaiterais que l'indicatif ne fasse pas partie du numéro de téléphone, qu'il soit juste concaténé avec celui-ci pour l'enregistrement, ainsi si je n'écris rien = seul l'indicatif apparait, je dois avoir une erreur comme quoi le numéro de téléphone n'a pas été saisi.
EDIT :
voilà le rendu visuel :

Le champ numéro de téléphone est en vert alors que le numéro de téléphone n'est pas saisi, le +(33) est donc enregistré !!
Avez-vous une idée de comment régler le problème ?
Merci

[autran]

il manque les 3 quarts de ton code mais bon.....
pourquoi ne pas utiliser le pattern associé a un imput type=tel pour faire le controle de format

[geeka]

Dans mon code j'ai juste voulu mettre les champs pays et téléphone, c'est là où se trouve le problème exactement.

pourquoi ne pas utiliser le pattern associé a un imput type=tel pour faire le controle de format

C'est une bonne idée, je ne connaissais ce nouvel attribut de HTML 5.
J'ai essayé de mettre ça dans mon code (par exp il faut mettre 3 lettres pour que ce soit correct) :

Code :

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

1
2
3
4
5
<form action="traitement_formulaire.php" method="post" id="sky-form" class="sky-form">
<input type="tel" name="tel_struct" id="tel_struct" placeholder="Téléphone générique" pattern="[A-Za-z]{3}">
<button type="submit" class="button" name="valider">Valider</button>
<!-- -->
</form>

Mais, cela ne fonctionne pas à cause de id="sky-form" de la balise <form>,je l'utilise pour faire des contrôles en Javascript, c'est ce qui gène, le problème maintenant c'est que si je l'enlève je perds mes contrôles javascript attribués à l'id sky-form.

[autran]

Alors enlève de ton contrôle de surface en JavaScript qui est dédié au formulaire d'id="sky-form" la partie pour l'input d'id="tel_struct".
et laisse le pattern de la balise tel faire son boulot

et choisi une convention de nommage car là tu as des tirets de underscore ...

[geeka]

J'ai enlevé l'input d'id="tel_struct" de la partie JS, mais le problème demeure toujours.

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<script>
setIndicatif = function(element)
{
    var indicatif = $(element).find('option:selected').attr('indicatif') ; 
        if (indicatif == undefined ) {
                $('#tel_struct').val('+(33) ');  
                $('#fax_struct').val('+(33) ');
        }
        else{
                $('#tel_struct').val('+('+indicatif+') ');  
                $('#fax_struct').val('+('+indicatif+') ');
        }
}       
setIndicatif($('#country'));
 
$('#countrySelect').on('change', function() {
    setIndicatif(this);
});
 
 
 
$(function()
                        {
                                // Masking
                                
                        });     
                        
                                // Validation
                                $("#sky-form").validate(
                                {                                       
                                        // Règles de validation
                                        rules:
                                        {
                                                nom_contact:
                                                {
                                                        required: true
                                                },
                                                famille_contact:
                                                {
                                                        required: true
                                                },
                                                typologie:
                                                {
                                                        required: true
                                                },
                                                thematique:
                                                {
                                                        required: true
                                                },
                                                
                                                fax_struct:
                                                {
                                                        required: false,
                                                        digits: false
                                                },
                                                mail_struct:
                                                {
                                                        required: true 
                                                },
                                                country:
                                                {
                                                        required: true
                                                },
                                                postalcode:
                                                {
                                                        required: true
                                                },
                                                place:
                                                {
                                                        required: true
                                                },
                                                fax_pers:
                                                {
                                                        //digits: true
                                                },
                                                
                                        },
                                                                                
                                        // Messages pour validation
                                        messages:
                                        {
                                                nom_contact:
                                                {
                                                        required: 'Saisissez le nom du contact'
                                                },
                                                famille_contact:
                                                {
                                                        required: 'Veuillez sélectionner le famille de contact'
                                                },
                                                typologie:
                                                {
                                                        required: 'Veuillez sélectionner une typologie'
                                                },
                                                thematique:
                                                {
                                                        required: 'Veuillez sélectionner une thématique'
                                                },
                                                mail_struct:
                                                {
                                                        required: 'Saisissez une adresse email',
                                                        email: 'Entrez une adresse email valide'
                                                },
                                                page_web:
                                                {
                                                        
                                                        url: 'Le format du champ est incorrect. Le format attendu est ((http://)|(https://)|(ftp://)|(mailto)):.*)',
                                                },
                                                
                                                country:
                                                {
                                                        required: 'Sélectionner le pays',
                                                },
                                                postalcode:
                                                {
                                                        required: 'Saisissez le code postal',
                                                },
                                                place:
                                                {
                                                        required: 'Saisissez la ville',
                                                },
                                                fax_pers:
                                                {
                                                        digit: 'Entrez seulement des chiffres'
                                                },
                                                
                                        },
                                                                                
                                        // Ajax form submition                                  
                                        submitHandler: function(form)
                                        {
                                                $(form).ajaxSubmit(
                                                {
                                                        beforeSend: function()
                                                        {
                                                                $('#sky-form button[type="submit"]').attr('disabled', true);
                                                        },
                                                        success: function()
                                                        {
                                                                $("#sky-form").addClass('submited');
                                                        }
                                                });
                                        },
                                        
                                        // Do not change code below
                                        errorPlacement: function(error, element)
                                        {
                                                error.insertAfter(element.parent());
                                        }
                                });     
</script>

[autran]

Bonsoir GEEKA,

Le code cumulé que tu nous a donné comprend du HTML évidemment, mais surtout du PHP et du JavaScript avec sauce JQUERY.

Le débogage de ton appli est difficile car on ne peut pas reproduire le code PHP ni recréer la base de données qu'il interroge.

Tu devrais essayer de remplir en dur un select avec 2 ou 3 <option> et ne tester que le JavaScript de l'input tel_struct.
Une fois stabilisé, tu peu mettre ces 2 éléments dans ton form et ajouter le reste du javascript pour voir ou se trouve le conflit.

[geeka]

Bonsoir Kevin,
Merci pour ton conseil.
1. J'ai testé avec une petite liste statique + le champ tél avec un pattern + le code JS de l'indicatif + le bouton valider.
Résultat 1 : Le pattern marche bien.
Code >>https://jsfiddle.net/35r3wrLg/
2. J'ai testé avec le 1. + un champ de liste statique + un code JS qui indique que cette liste-là est obligatoire (required)
Résultat 2 : Le code JS pour required marche mais le pattern ne marche plus.
Code >>https://jsfiddle.net/p0obq6zs/1/
PS: Le code tout en haut de Javascript est juste le fichier <script src="js/jquery.validate.min.js"></script> utilisé pour la fonction validate().

[autran]

1. J'ai testé avec une petite liste statique + le champ tél avec un pattern + le code JS de l'indicatif + le bouton valider.
Résultat 1 : Le pattern marche bien.
Code >>https://jsfiddle.net/35r3wrLg/

Chez moi, ca ne marche pas (sur JSFIDDLE bien entendu). En effet, il refuse tout mes N° de telephones de 1 à 10 chiffres.
mon navigateur : IE 11

[Invité]

Bonjour,

1/ Si tu veux pouvoir utiliser la numérotation automatique, ce n'est pas +(33), mais +33 !

Code :

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

<a href="tel:+33 1 23 45 67 89">+33 1 23 45 67 89</a>

2/ SOLUTION 1 :
Pourquoi ne pas juste mettre cet indicatif comme placeholder de l'input ?

Code :

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

1
2
<input name="tel" id="tel_struct" placeholder="" />
<input name="fax" id="fax_struct" placeholder="" />

JS :

Code :

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

1
2
		$('#tel_struct').attr('placeholder').val('+'+indicatif+' '); 
		$('#fax_struct').attr('placeholder').val('+'+indicatif+' ');

Inconvénient : on doit retaper à la main cet indicatif...

3/ SOLUTION 2 :
Il faut connaitre le pattern des numéros pour chaque pays, ce qui s'avère compliqué !

• les indicatifs sont de la forme +xx ou +xxx
• les numéros comportent de 6 à 10 numéros (à vérifier en fonction du pays)

ex. en Nouvelle Calédonie : +687 12 34 56

Bref : si le numéro récupéré fait moins de 4 caractères : c'est qu'il n'a pas été correctement rempli.
Voilà un début de piste.

[geeka]

Merci pour vos réponses!
@Kevin : Ah bon! Je n'ai pas testé sur IE, mais ça devrait quand même marcher pour la version 11

@jreaux62:
Les deux solutions sont pas mal.

les indicatifs sont de la forme +xx ou +xxx
les numéros comportent de 6 à 10 numéros (à vérifier en fonction du pays)

Merci beaucoup pour ces informations très utiles, donc 10 numéros c'est le maximum. Au moins 4 et au plus 10 c'est ça ?

[Invité]

Bonjour,
je pense que tu peux toi-même trouver ces informations !

• Liste des indicatifs téléphoniques internationaux par indicatif
• Structures des numéros de téléphone par pays

[geeka]

Merci