verification numerique input

Version imprimable

bonjour, je veux verifier un champs. Je ne souhaite que les caracteres suivant 0123456789.

Voici le code (trouvé grace à Google) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function IsNumeric(sText)
{
   var ValidChars = "0123456789.";
   var IsNumber=true;
   var Char;
 
 
   for (i = 0; i < sText.length && IsNumber == true; i++) 
      { 
      Char = sText.charAt(i); 
      if (ValidChars.indexOf(Char) == -1) 
         {
         IsNumber = false;
         }
      }
   return IsNumber;
 
   }

Mon champs a tester :

Code:

1
2
<form name="form1" method="post" action="add.php">
<input name="prix" type="text" id="prix">

Comment dois-je modifier ce code afin qu'il me verifier ce champs en particulier ?

30/03/2010, 11h55
vermine

Bonjour,

Houlala, SpaceFrog va vous proposer les expressions régulières. :)
L'évènement déclencheur peut être le onchange, ou bien le onkeypress, onblur, ... A vous de voir.
30/03/2010, 11h57
SpaceFrog

oui les regExp ou !isNaN()
30/03/2010, 11h58
epoc.01

Bonjour vermine, je javascript tres peu, je ne sais pas comment lui balancer le stext.

Quant au expression reguliere, j'y avais pensé mais quand j'ai vu les hyeroglypes que ca me donnait .... j'ai fuit en courant :D
30/03/2010, 12h00
vermine

Je pensais qu'il fallait éviter isNaN. :o
30/03/2010, 12h04
epoc.01
... je suis la :D

avec ce code comment modifier le :
Code:

1 2 <form name="form1" method="post" action="add.php"> <input name="prix" type="text" id="prix">
pour qu'il accepte la fonction trouvée sur Google ?
30/03/2010, 12h06
E.Bzz
Bonjour,
Citation:
Envoyé par epoc.01

avec ce code comment modifier le :

Code:

1 2 <form name="form1" method="post" action="add.php"> <input name="prix" type="text" id="prix">

pour qu'il accepte la fonction trouvée sur Google ?
les réponses données ne t'intéressent pas ?

A+
30/03/2010, 12h09
epoc.01

si bien sur :)
Mais je demande juste comment modifier mon form... et pas autre chose :ccool:
30/03/2010, 12h12
E.Bzz

Mais du coup tu n'as pas besoin de le modifier, ton form.
Juste à ajouter à ton input un

Code:

onkeyup="if (isNaN(this.value)) alert('Pas glop !');"

par exemple ...

A+
30/03/2010, 12h25
vermine
Code:

1 2 !isNaN
Dans ce cas-ci. ;)
30/03/2010, 12h27
epoc.01

merci, d'apres ce que je vois le NaN prend les chiffres, le . et la ,

C'est.... presque ce que je veux. Je ne veux pas de la virgule :P

Du coup j'en reviens a mon script d'origine :D

Code:

1
2
 
onkeyup="if(!IsNumeric(this.value)) alert('Gloup');"

30/03/2010, 12h30
E.Bzz
Citation:
Envoyé par vermine

Code:

1 2 !isNaN

Dans ce cas-ci. ;)
Sûr ?

:whistle:

A+
30/03/2010, 12h31
vermine

Non mais je suis dislexique. :aie:

:oops:
30/03/2010, 12h32
E.Bzz

T'inquiète : tout le monde se fait avoir par cette fonction et l'interprète à l'envers ;)

A+
30/03/2010, 12h35
Gsnalf

Citation:

Envoyé par E.Bzz

T'inquiète : tout le monde se fait avoir par cette fonction et l'interprète à l'envers ;)

A+

`

Code:

<input onkeydown="if(!this.value.match(/\d+/)) alert('pas biennn')"/>
30/03/2010, 12h41
SpaceFrog

:no:

Code:

<input onkeyup="if(!this.value.match(/^\d+$/)) alert('pas biennn')"/>

et pour Ebzz

Code:

alert(!isNaN(20))
30/03/2010, 13h11
Gsnalf

Citation:

Envoyé par SpaceFrog

:no:

Code:

<input onkeyup="if(!this.value.match(/^\d+$/)) alert('pas biennn')"/>

et pour Ebzz

Code:

alert(!isNaN(20))

Hey vilainnnn j'allais rajouter les caractère de début et de fin dans la regexp :calim2::calim2::cry::cry::cry:
30/03/2010, 13h11
epoc.01

merci a tous, ca marche.... presque :D

Je suis lourd dsl, comment enlever la valeur entiere si elle contient un caractere non voulue ? Car la le champs garde la valeur saisie

Encore mercim de votre reactivité :)
30/03/2010, 13h29
vermine

SpaceFrog, 20 est un nombre donc dire que 20 n'est pas pas un nombre, est vrai. :lol:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
function IsNumeric(sText)
{
   var ValidChars = "0123456789.";
   var Char;
   var nombre = "";
 
 
   for (i = 0; i < sText.length; i++) 
      { 
      Char = sText.charAt(i); 
      if (ValidChars.indexOf(Char) != -1) 
         {
             nombre += Char;
         }
      }
 
   return nombre;
}

Code:

1
2
 
onkeyup="this.value = IsNumeric(this.value);"

Citation:
Envoyé par vermine
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function IsNumeric(sText) { var ValidChars = "0123456789."; var Char; var nombre = ""; for (i = 0; i < sText.length && IsNumber == true; i++) { Char = sText.charAt(i); if (ValidChars.indexOf(Char) != -1) { nombre += Char; } } return nombre; }
Code:

1 2 onkeyup="this.value = IsNumeric(this.value);"
Il y a des moments dans la vie ou il faut utiliser les fonctions fournies par le langage :)
de plus ta fonction n'a pas un bon nom puisque vue son nom elle devrait retourner un booleen et non une chaine transformée :).

http://www.jsfiddle.net/AF8p2/1/
Code:

1 2 3 4 5 6 7 8 function isNumeric(sText, base) { return !isNaN(sText*1); } document.write(isNumeric('10s'), '<br>'); //=> false document.write(isNumeric('20'), '<br>'); //=> true document.write(isNumeric('0x10'), '<br>'); //=> true document.write(isNumeric('3.14'), '<br>'); //=> true
Pourquoi j'utilise '*1' et non pas parseInt, parce qu'ici on veut tester si une chaine est un nombre ou pas, et si on tombe sur le premier cas que je donne en exemple :
'10s', parseInt nous retournera 10, alors que *1 retournera NaN;

Pour avoir une fonction qui ne retourne que les chifffres et le . une simple expression régulière suffira :
Code:

1 2 3 4 5 function getOnlyDecimalChars(sText) { return sText.match(/([0-9.]+)/g).join(''); } document.write(getOnlyDecimalChars('10.4ss4')); //=> 10.44;

30/03/2010, 13h54
E.Bzz

Citation:

Envoyé par SpaceFrog

et pour Ebzz

Code:

alert(!isNaN(20))

=> true (comme prévu)

Je comprends pas la démonstration :koi:

Mais c'est peut être mes booléens "glop" et "pas glop" qui ont été mal interprétés :aie:

A+
30/03/2010, 13h55
vermine

Oui, mais j'ai cru qu'il fallait récupérer la chaine nettoyée de tout caractère autre que 0123456789.
Chose que l'on peut faire avec une regexp aussi, évidemment, mais j'ai simplement repris le code déjà existant.
30/03/2010, 14h02
epoc.01

je pensais pas faire autant de polemique avec mon topic :D

Au final je fais quoi .... :D :ccool:

Thx
30/03/2010, 14h03
vermine

Au final, vous voulez quoi ?
30/03/2010, 14h07
Gsnalf
Citation:

Envoyé par epoc.01

je pensais pas faire autant de polemique avec mon topic :D

Au final je fais quoi .... :D :ccool:

Thx

En lisant un peu et en essayant de comprendre il suffit de cumuler les fonctions qui marchent avec ton input et on obtient :
Code:

1 2 3 4 5 function getOnlyDecimalChars(sText) { return sText.match(/([0-9.]+)/g).join(''); } <input type="text" onkeyup="this.value = getOnlyDecimalChars(this.value)" />
30/03/2010, 14h14
epoc.01
Citation:
Envoyé par Gsnalf

En lisant un peu et en essayant de comprendre il suffit de cumuler les fonctions qui marchent avec ton input et on obtient :

Code:

1 2 3 4 5 function getOnlyDecimalChars(sText) { return sText.match(/([0-9.]+)/g).join(''); } <input type="text" onkeyup="this.value = getOnlyDecimalChars(this.value)" />
Salut Gsnalf, merci de ton aide mais cela ne fonctionne pas, l'chaine est envoyé meme s'il y a des caracteres non desirés.

Vous voulez vider la chaine ?

Code:

1
2
 
<input type="text" onkeyup="this.value=this.value.match(/^([0-9.]+$)/g) ? this.value : ''">

30/03/2010, 14h53
SpaceFrog

un peu radical ^^
30/03/2010, 15h00
epoc.01

merci ca fonctionne.. :)

Maintenant pour perfectionner la chose, comment empecher la saisie de 2 . (ex : 20..36)? je pense que ca doit etre possible en javascript.

Citation:

Envoyé par epoc.01

merci ca fonctionne.. :)

Maintenant pour perfectionner la chose, comment empecher la saisie de 2 . (ex : 20..36)? je pense que ca doit etre possible en javascript.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <input type="text" onkeyup="this.value = getOnlyDecimalChars(this.value)" /> function getOnlyDecimalChars(sText) { var m = sText.match(/[0-9.]/g,'') //on ne garde que les chiffres et . return m ? m.join('') // on remet tout ça dans une seule string .replace(/\.+/,'.') //on remplace tous les .. et ...+ par . .match(/^\d+\.?\d*/) // on renettoie la chaine pour ne pas se retrouver avec un cas du genre 12.34.56 on ne gardera que 12.34 .join('') // on join le résultat //dans le cas ou m est null on retour une chaine vide. : ''; }
Voila ça te clean la chaine proprement en ne gardant que les chiffres et . et en ne te laissant que la possibilité de taper 12.34 par exemple :)

exemple :

Code:

getOnlyDecimalChars('12Z....SDsds23.qsdsq234.131...13'); //=> 12.23

edit : testable ici
http://www.jsfiddle.net/e6ZWr/

30/03/2010, 15h28
epoc.01

merci ca fonctionne parfaitement
30/03/2010, 15h38
E.Bzz

Citation:

Envoyé par epoc.01

merci ca fonctionne parfaitement

Oui mais c'est dangereux :mouarf:

Si il y a un caractère invalide il faut le signaler et non pas le masquer ...

Sauf si on a la garantie de tomber sur l'unique utilisateur du web qui ne fait jamais de faute de frappe et/ou relit systématiquement tout ce qu'il tape.

A éviter ...

A+
30/03/2010, 15h59
Gsnalf

Citation:

Envoyé par E.Bzz

Oui mais c'est dangereux :mouarf:

Si il y a un caractère invalide il faut le signaler et non pas le masquer ...

Sauf si on a la garantie de tomber sur l'unique utilisateur du web qui ne fait jamais de faute de frappe et/ou relit systématiquement tout ce qu'il tape.

A éviter ...

A+

On ne masque rien, on nettoie ce que l'utilisateur fait comme faute de frappe, et on ne supprime pas le contenu du champ, je ne fais qu'enlever les caractères inutiles et mal tapé, puisque l'utilisateur n'a le droit que de taper des nombres.

Si l'utilisateur tapes : 12S..34
il se retrouveras avec 12.34 lors de sa frappe cela se passera ainsi :

1 => 1
12 => 12
12S => 12
12. => 12.
12.. => 12.
12.3 => 12.3
12.34 => 12.34
30/03/2010, 16h14
E.Bzz

C'est justement ce qui est dangereux.

Car en faisant ça tu tentes d'interpréter ce que l'utilisateur pensait avoir saisi.

Si il s'est trompé, il s'est trompé. Et il faut lui dire et ne pas faire de supposition.

Dans l'exemple que tu donnes, il voulait en fait saisir 123.34 mais s'est gauffré (ben oui, y avait la super collègue qui passait dans le bureau et il fallait bien sortir une vanne pour se faire remarquer :aie: ).
Mais toi tu enregistres 12.34 sans rien lui dire. Lui, comme tout le monde, valide les yeux fermés. C'est pas bien, mais très classique.

Il ne s'apercevra jamais qu'il s'est trompé.
Ou alors lors de l'arrêté comptable mensuel (mais y a des chances qu' "on" s'en aperçoive pour lui) :mrgreen:

A+
30/03/2010, 16h18
Gsnalf

Citation:

Envoyé par E.Bzz

C'est justement ce qui est dangereux.

Car en faisant ça tu tentes d'interpréter ce que l'utilisateur pensait avoir saisi.

Si il s'est trompé, il s'est trompé. Et il faut lui dire et ne pas faire de supposition.

Dans l'exemple que tu donnes, il voulait en fait saisir 123.34 mais s'est gauffré (ben oui, y avait la super collègue qui passait dans le bureau et il fallait bien sortir une vanne pour se faire remarquer :aie: ).
Mais toi tu enregistres 12.34 sans rien lui dire. Lui, comme tout le monde, valide les yeux fermés. C'est pas bien, mais très classique.

Il ne s'apercevra jamais qu'il s'est trompé.
Ou alors lors de l'arrêté comptable mensuel (mais y a des chances qu' "on" s'en aperçoive pour lui) :mrgreen:

A+

Si le gars tape 123.34 il peut taper 123.34 :D
je vois pas le problème. Mais je crois que toi tu préfèrerais qu'on avertisse l'utilisateur qu'il s'est trompé lors de la saisie du nombre. là oui je suis plutot d'accord. C'est plutôt chiant les trucs automatiques. Sauf pour le cas d'une date, là c'est plutot pas mal.
30/03/2010, 16h25
E.Bzz

Citation:

Envoyé par Gsnalf

Mais je crois que toi tu préfèrerais qu'on avertisse l'utilisateur qu'il s'est trompé lors de la saisie du nombre.

C'est exactement ça ;)
Car à partir du moment où il s'est trompé, on ne peut pas savoir ce qu'il aurait dû/voulu taper à la place ...

A+