Fonction pour valider une numéro de Tel

Version imprimable

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:

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:

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!

04/12/2013, 11h02
Bovino

Code:

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:

if(num.value == "" )

:aie:

Et au passage, il n'existe pas d'attribut label pour un input.
04/12/2013, 11h07
algerino77

Hm ok, je comprends..

Donc qu'est ce que je dois mettre dans ma condition pour pouvoir tester?
04/12/2013, 19h21
SylvainPV

Bovino t'a donné la réponse, un petit effort ;)
04/12/2013, 21h28
algerino77

Citation:

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:

if(num.value == valide )

mais mon numéro est toujours incorrect
04/12/2013, 21h32
NoSmoking
Bonjour,

Citation:

onkeyup="checkNum(this.value);"

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

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

:salut:
Ou bien une solution en HTML5 en utilisant l'attribut pattern avec un peu de style ;)
Voici quelques exemples de pattern :king:

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
<!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>

Citation:

Envoyé par NoSmoking

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

Code:

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

Donc

Code:

function checkNum(num)

?

@hackoofr

Pour l'école je dois utiliser du JS

EDIT: Ca fonctionne!

Code:

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:

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 = "";
	}
}

05/12/2013, 14h51
SylvainPV

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

Code:

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