désactivation de touche tab

Version imprimable

Bonjour, j'ai un souci et je vous l'explique:

J'ai un input text qui permet d'entrer un courriel.

Code:

1
2
 
<input name="txtCourriel" type="text" size="20" maxlength="50"  onblur="if (verifCourriel() != false){ChangeClass(this,'oblCourriel')};" >

La function verifCourriel permet de vérifier si le courriel est valide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function verifCourriel(){
     var regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; 
<!-- Regex pour valider un e-mail -->
     var result = true;
     if (document.forms['formulaire'].elements['txtCourriel'].value != ''){
          champ = document.forms['formulaire'].elements['txtCourriel'].value;
    	  if (!regex.test(champ)){
    	       document.forms['formulaire'].elements['txtCourriel'].value = '';
      	       alert('Veuillez choisir un courriel valide.');
      	       document.forms['formulaire'].elements['txtCourriel'].focus();
      	       result =  false;
    	 }
     }
     return result;
}

Le problème :
Quand un utilisateur entre sont e-mail, appui sur TAB pour changer de case et que l'adresse e-mail n'est pas valide, le focus change quand même de case.

18/09/2008, 16h59
le_chomeur

dans ce cas ajoute onblur = perd le focus :)
puis une méthode vérifiant le mail , si le mail n'est pas bon , redonne le focus a ce champs :)
18/09/2008, 17h02
jeepibmx

exactement ce que je fais ??

excuse moi un peu fatigué ^^

voila ce que j'ai testé et qui fonctionne :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function verifCourriel(){
     var regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; 
<!-- Regex pour valider un e-mail -->
     var result = true;
     if (document.forms['formulaire'].elements['txtCourriel'].value != ''){
          champ = document.forms['formulaire'].elements['txtCourriel'].value;
    	  if (!regex.test(champ)){
    	       document.forms['formulaire'].elements['txtCourriel'].value = '';
      	       //alert('Veuillez choisir un courriel valide.');
      	       document.forms['formulaire'].elements['txtCourriel'].focus();
      	       result =  false;
    	 }
     }
     return result;
}
 
</script>
</head>
 
<body>
<form name="formulaire">
<input name="txtCourriel" type="text" size="20" maxlength="50"  onblur="if (verifCourriel() != false){ChangeClass(this,'oblCourriel');}" >
<input type="text" onfocus="document.forms['formulaire'].elements['txtCourriel'].focus();" />
</form>
</body>
</html>

pas eu le temps de creuser pourquoi le focus(); ne marche pas mais je pense qu'il s'agit de l'ordre de propagation des évènements . . .
donc en lui redonnant le focus a partir d'un autre champs ça marche :)

18/09/2008, 17h16
jeepibmx

ça fonctionne si l'adresse est invalide mais quand elle est valide le tab ne fonctionne pas??

Citation:

Envoyé par le_chomeur

pour moi ça marche bien sous IE6 et Opera (mais sous FF le focus n'est pas rendu sur le champ mail en cas d'erreur)

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function verifCourriel(){
     var regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; 
<!-- Regex pour valider un e-mail -->
     var result = true;
     if (document.forms['formulaire'].elements['txtCourriel'].value != ''){
          champ = document.forms['formulaire'].elements['txtCourriel'].value;
    	  if (!regex.test(champ)){
    	       document.forms['formulaire'].elements['txtCourriel'].value = '';
      	       document.forms['formulaire'].elements['txtCourriel'].focus();
      	       result =  false;
    	 }
     }
     return result;
}
 
 function ChangeClass(o,css)
 {
  o.className = css;
 }
 
</script>
<style>
  .oblCourriel
  {
    color : green;
  }
</style>
</head>
 
<body>
<form name="formulaire">
<input name="txtCourriel" type="text" size="20" maxlength="50"  onblur="if (verifCourriel() != false){ChangeClass(this,'oblCourriel');}" >
<input type="text" />
</form>
</body>
</html>

18/09/2008, 17h52
jeepibmx

aarrrrggg :evilred: si seulement sa pourrais fonctionner avec FF :aie:

merci de la réponse

Il ne serais pas plus simple de faire quelque chose du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<input name="txtCourriel" type="text" size="20" maxlength="50" onkeypress="refuserToucheEntree(event);" >
 
 
function refuserToucheEntree(event){
    // Compatibilité IE / Firefox
    if(!event && window.event) {
        event = window.event;
    }
    // IE
    if(event.keyCode == 9) {				
        event.returnValue = false;
        event.cancelBubble = true;
    }
    // DOM
    if(event.which == 9) {
        event.preventDefault();
        event.stopPropagation();
    }
}

Marche pas avec IE :(

19/09/2008, 09h17
le_chomeur

bonjour :)
bon aujourd'hui ça va mieux ( hier je m'excuse je t'ai donné des moitiés de réponse . . . )

je cherche encore pourquoi en donnant le focus au champs a partir d'une méthode cela ne marche pas alors que comme vu dans l'exemple que j'ai donné , en le donnant directement sur un onfocus d'un autre élément cela fonctionne . . . je cherche je cherche