Imposer des restrictions pour des textboxes

Version imprimable

13/07/2011, 17h57
lcoulon

Imposer des restrictions pour des textboxes

Bonjour,

J'ai créé un formulaire a l'aide de textboxes ou l'utilisateur doit rentrer des informations telles que dates, et autres données.

Est il possible de générer une sorte de restriction vis à vis de ce qui sera entrée par l'utilisateur dans la textboxe ?

En effet, je voudrai par exemple être certain que l'utilisateur puisse entrer que :

- un chiffre compris entre 1 et 31 ( pour une textboxe destinée aux mois de l'année )

- un chiffre et pas de lettres

Est ce possible de faire ce genre de restriction ?
Si oui, pourriez vous m'indiquer comment procéder ?

Je vous remercie de votre aide,
13/07/2011, 20h18
NoSmoking

Bonjour,
:faq:Comment n'autoriser que la saisie de chiffres dans un champ texte ?
à adapter pour ton cas...
14/07/2011, 17h10
lcoulon

Merci, ça fonctionne bien.

Par contre, comment faut il faire si je souhaite que le contenu entré dans le formulaire ne puisse être compris qu'entre 0 et 59 ( donnée horaire )
16/07/2011, 09h55
lcoulon

Pouvez vous me dire si il est possible grâce à un script de n'accepter qu'un chiffre compris entre 0 et 59 ?

Je n'ai pas trouvé d'exemple sur le web.

Merci à vous,

Citation:

Je n'ai pas trouvé d'exemple sur le web.

cela me surprend un peu!

Néanmoins, la fonction fournie dans la :faq: ne permet pas de corriger une erreur de saisie sous FireFox, retour arrière, flèches de direction, tabulation et autre entrée sont annulés, donc je t'en fourni une autre, mais tout d'abord la fonction de test qui sera appelée dans celle ci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function testValeur( obj, mini, maxi){
  // recup de la valeur
  var val = parseFloat( obj.value);
  // test aux limites
  if(( val < mini) || (val >maxi)){
    // changement couleur de fond et affichage erreur
    obj.style.backgroundColor = "#ffe0e0";
    alert( 'la valeur doit \352tre comprise entre\nmini\t: ' +mini +'\nmaxi\t: ' +maxi);
    // restaure un fond blanc
    obj.style.backgroundColor = "#ffffff";
    // annule la saisie
    obj.value = "";
    // remets le focus
    obj.focus();
  }
}

et maintenant la fonction de saisie

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
function saisieChiffre( e, mini, maxi){
  // get event si non transmis a la fonction
  e = e || window.event;
  // accepte chiffres plus point
  var regValide  = /[\d\.]/;
  // accepte les touches BS TAB ENTER END HOME etc...
  var regSpecial = /[\x00\x08\x09\x0D\x23\x24\x25\x26\x27\x28]/;
  // recup code touche pressee
  var code = e.which || e.keyCode;
  // recup le caractere correspondant
  var touche = String.fromCharCode( code);
  // test la validite de la saisie
  var saisieOk = regValide.test( touche) || regSpecial.test( touche);
  // test aux bornes si OK
  if( saisieOk){
    var oInput = e.target || e.srcElement;
    // differe le test pour permettre le update de l'input
    setTimeout( function(){
      testValeur( oInput, mini, maxi);
    }, 10);
  }
  // annule la saisie
  else{
    if( e.stopPropagation){
      e.stopPropagation();
      e.preventDefault();
    }
    else{
      e.cancelBubble = true;
      e.returnValue  = false;
    }
  }
}

et tout cela avec un appel du type

Code:

<input type="text" onkeypress="saisieChiffre(event, 0, 59)">

Les commentaires sont nombreux, mais n'hésites pas si tu rencontres un problème.

16/07/2011, 19h43
lcoulon

Merci, je vais étudier ce code avec attention.

Cordialement,
20/07/2011, 19h19
lcoulon

J'ai réussi à réaliser une fonction qui permet de s'assurer qu'on a bien entré un chiffre et qu'il se trouve bien entre 0 et 99

Pour associer ce test à mes différentes textboxes, j'appelle ma fonction avec onblur, mon probleme c'est que pour la dernière textboxe a verifier, l'utilisateur va soit cliquer sur le bouton submit ou la touche entrée car il a rempli toutes les textboxes, il n'a plus besoin d'utiliser TAB ou cliquer dans la textboxe suivante.

De ce fait, la dernière textboxe n'est pas vérifiée car onblur n'intervient donc jamais sur celle ci.

Comment pourrais je faire pour que cette dernière textboxe soit bien testée par ma fonction ?

--

Autre question : peut on griser, rendre inactif un bouton 'submit' quand que toutes les textboxes n'ont pas été remplies ?

si oui, quel code peut réaliser cela ?

Merci à vous,
22/07/2011, 10h37
NoSmoking

Citation:

Pour associer ce test à mes différentes textboxes, j'appelle ma fonction avec onblur, mon probleme c'est que pour la dernière textboxe a verifier, l'utilisateur va soit cliquer sur le bouton submit ou la touche entrée car il a rempli toutes les textboxes, il n'a plus besoin d'utiliser TAB ou cliquer dans la textboxe suivante.

De ce fait, la dernière textboxe n'est pas vérifiée car onblur n'intervient donc jamais sur celle ci.

je rajouterais que si l'internaute sélectionne le premier champ et qu'il valide, appui sur la touche entrée, le formulaire sera également soumis.

De plus que le bouton submit soit ou non masqué ne modifiera pas ce comportement.

Il te faut avoir une autre approche quant aux vérifications.

Tu peux par exemple ne pas autoriser la touche entrée, dans tes champs, et dans ce cas l'événement onblur sera effectif.

Tu peux vérifier avant soumission que tous les champs sont remplis, avec les bonnes valeurs, en faisant cette vérification sur chaque onblur pour ajouter de la convivialité à l'interface, sans perdre de vue que les seules vérifications efficaces se font coté serveur.