Fonction pour valider une numéro de Tel

**algerino77** · 04/12/2013, 10h50

Bonjour,

j'ai tourner le truc dans tout les sens mais impossible de la faire fonctionner..
Le but c'est de tester sur un formulaire si l'utilisateur entre un numéro de téléphone correct:
- Commence par 0 (suivi immédiatement d'un chiffre entre 0 et 7)
- Maximum de 10 chiffres
- Uniquement des chiffres

Code html :

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

1
2
3
4
5
<tr>
	<td><label for="num">Entrez votre Téléphone: </label></td>
	<td><input label type="text" name="Tel" id="num" maxlength=10 onkeyup="checkNum(this.value);" placeholder="Téléphone portable" required/></td>
	<td><span id="confirmeNum" class="confirmeNum"></span></td>
</tr>

Code js :

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
function checkNum()
{
	var num = document.getElementById('num');
	var message = document.getElementById('confirmeNum');
	var vert = "#06E98E";
    var rouge = "#FE0101";
	var none = "";
    var valide=/^0[1-7]\d{8}$/;
 
    if(valide.test(num))
	{
        num.style.backgroundColor = vert;
		message.style.color = vert;
        message.innerHTML = "Numéro Correct!";
    }
 
    else
	{
        num.style.backgroundColor = rouge;
		message.style.color = rouge;
        message.innerHTML = "Numéro Incorrect!";
    }
 
	if(num.value == "" )
	{
		num.style.backgroundColor = none;
        message.style.color = none;
        message.innerHTML = "";
	}
}

Merci d'avance pour votre aide!

**Bovino** · 04/12/2013, 11h02

Code :

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

if(valide.test(num))

num correspond à un élément HTML de type input, tu ne peux donc pas le tester sur une expression régulière...
Ce qui est étonnant, c'est qu'ensuite, tu utilises bien

Code :

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

if(num.value == "" )

Et au passage, il n'existe pas d'attribut label pour un input.

**algerino77** · 04/12/2013, 11h07

Hm ok, je comprends..

Donc qu'est ce que je dois mettre dans ma condition pour pouvoir tester?

**SylvainPV** · 04/12/2013, 19h21

Bovino t'a donné la réponse, un petit effort

**algerino77** · 04/12/2013, 21h28

Envoyé par SylvainPV

Bovino t'a donné la réponse, un petit effort

Je vois bien qu'avec ce qu'il m'a dit j'y suis presque,
mais j'ai oublié de préciser que je débute en JS,
et qu'a l'école on me demande de faire ca sans aucun cours..
Donc j'ai essayé pendant 2h après sa réponse de modifier mon code
mais sans succès..

j'ai testé:

Code js :

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

if(num.value == valide )

mais mon numéro est toujours incorrect

**NoSmoking** · 04/12/2013, 21h32

Bonjour,

onkeyup="checkNum(this.value);"

tu passes la valeur à tester en paramètre à ta fonction sans aucune exploitation coté fonction

Code :

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

1
2
3
function checkNum(){ // elle est où la récupération du paramètre ?
  //...
}

**hackoofr** · 05/12/2013, 04h05

Ou bien une solution en HTML5 en utilisant l'attribut pattern avec un peu de style

Voici quelques exemples de pattern

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
<!doctype html>
<html lang="fr">
<meta http-equiv="x-ua-compatible" content="ie=9">
<meta charset="utf-8" />
<title>Valider un numéro de Téléphone en HTML5</title>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.gday.net.au/A.table_formatting.css+form_formatting.css,Mcc.oypwx3VI42.css.pagespeed.cf.2v-c6vAqSE.css"/>
<meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>
<style>
        body{
          background-image: url(background.png);
          font-family: 'Open Sans',sans-serif;
         font-weight: 400;
          font-size: 13px;
     }
 
        :invalid {
          background-color: #F0DDDD;
          border-color: #e88;
          -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
          -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
          box-shadow:0 0 5px rgba(255, 0, 0, .8);
       }
 
        :required {
          border-color: #88a;
          -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
          box-shadow: 0 0 5px rgba(0, 0, 255, .5);
        }
 
        form {
          width:300px;
          margin: 20px auto;
        }
 
        input {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          border:1px solid #ccc;
          font-size:20px;
          width:300px;
          min-height:30px;
          display:block;
          margin-bottom:15px;
          margin-top:5px;
          outline: none;
 
          -webkit-border-radius:5px;
          -moz-border-radius:5px;
          -o-border-radius:5px;
          -ms-border-radius:5px;
          border-radius:5px;
        }
 
        input[type=submit] {
          background:none;
          padding:10px;
          cursor: pointer;
                  }
 
        label{
          cursor: pointer;
                  }
 
    </style>
<body>
<center>
<table>
<form method="POST" action="#">
<tr>
    <td><label for="num"><h3>Entrez votre Téléphone: </h3></label></td>
    <td><input label type="text" name="Tel" id="num" maxlength=10 pattern="^0[1-7]\d{8}$" placeholder="Téléphone portable" required title="Tapez dans ce champ 0 (suivi immédiatement d'un chiffre entre 0 et 7)"/></td>
</tr>
</table>
</form>
</center>
</body>
</html>

**algerino77** · 05/12/2013, 08h11

Envoyé par NoSmoking

Bonjour,
tu passes la valeur à tester en paramètre à ta fonction sans aucune exploitation coté fonction

Code :

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

1
2
3
function checkNum(){ // elle est où la récupération du paramètre ?
  //...
}

Donc

Code js :

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

function checkNum(num)

?

@hackoofr

Pour l'école je dois utiliser du JS

EDIT: Ca fonctionne!

Code html :

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

1
2
3
4
5
<tr>
	<td><label for="num">Entrez votre Téléphone: </label></td>
	<td><input type="text" name="tel" id="tel" maxlength=10 onkeyup="checkNum(this.value);" placeholder="Téléphone portable" required/></td>
	<td><span id="confirmeNum"></span></td>
</tr>

Code js :

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
function checkNum(num)
{
	var num = document.getElementById('tel').value;
 
	var message = document.getElementById('confirmeNum');
	var vert = "#06E98E";
    var rouge = "#FE0101";
	var none = "";
 
    var valide=/^0[1-7]\d{8}$/;
 
if(valide.test(num))
	{
        tel.style.backgroundColor = vert;
		message.style.color = vert;
        message.innerHTML = "Numéro Correct!";
    }
 
    else
	{
        tel.style.backgroundColor = rouge;
		message.style.color = rouge;
        message.innerHTML = "Numéro Incorrect!";
    }
 
	if(num.value == "" )
	{
		tel.style.backgroundColor = none;
        message.style.color = none;
        message.innerHTML = "";
	}
}

**SylvainPV** · 05/12/2013, 14h51

Dans ce cas, si num prend la valeur value, tu peux retirer le .value à la fin :

Code :

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

if(num.value == "" )

Et tu redéfinis la valeur passée en argument dès la première ligne, donc aucun intérêt de la passer. Tu peux supprimer la ligne avec le document.getElementById

Fonction pour valider une numéro de Tel

JavaScript

Discussions similaires

Partager

Partager