Connecting Tech Pros Worldwide Forums | Help | Site Map

Field constraint

Member
 
Join Date: Jun 2007
Posts: 99
#1: Sep 10 '08
Hi,

I have a field in form that receive integer upto 2 decimal only like 56.22
The field should not accept greater then 999999.99

and we have to restrict user not to enter more then this on keypress event of field.

Please help...

valid entries
0.22
1.22
100000.99
2.2

Invalid
0.232 [user should not allowed to enter decimal more then 2]
1999999.99

Regards,

Expert
 
Join Date: Nov 2006
Posts: 392
#2: Sep 10 '08

re: Field constraint


Google for JavaScript pattern matching examples using regular expressions.
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3: Sep 11 '08

re: Field constraint


For all things reg-expy, http://www.regular-expressions.info/ is a good resource.
Member
 
Join Date: Jun 2007
Posts: 99
#4: Sep 12 '08

re: Field constraint


I am already using regex /^([0-9]{0,6}|[0-9]{0,6}\.[0-9]{0,2})$/ to validate the input but It is not restricting user to enter but it check on submit whether user have entered the value as per regex or not.


But i want to restrict user while typing that he cannot enter any data that is outside as per the regex...
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#5: Sep 12 '08

re: Field constraint


You can check that the input matches the regex onkeypress. The problem would be that you'd need to disallow everything except the valid characters, but that would end up disabling control characters such as backspace, delete, etc. The best thing would be to check onkeyup and remove invalid characters.
Member
 
Join Date: Jun 2007
Posts: 99
#6: Sep 16 '08

re: Field constraint


Quote:

Originally Posted by acoder

You can check that the input matches the regex onkeypress. The problem would be that you'd need to disallow everything except the valid characters, but that would end up disabling control characters such as backspace, delete, etc. The best thing would be to check onkeyup and remove invalid characters.

I have created the below it works fine fine for only one scenario at a time.for example if i satisfy the first regex then it will not allow to enter data as per reg1 regex.

If i entered 123456 it is not allowing me to enter 123456.99 but it should Please correct what i have done wrong

another exmaple 12.23 it works fine


One more question i am using /^(\d{0,5})$/ 5 repetition of digit but it allows to enter 6?


[HTML]
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<script type="text/javascript">

function numbersonly(e,th) {
var reg = /^(\d{0,5})$/;
var reg1 = /^(\d{0,5}\.\d{0,1})$/;
var val=th.value;
var key;
var keychar;

if (window.event) {
key = window.event.keyCode;
}
else if (e) {
key = e.which;
}
else {
return true;
}
keychar = String.fromCharCode(key);

if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) ) {
return true;
}
else if (reg1.test(val) || reg.test(val) ) {
return true;
}
else
return false;
}
</script>
</head>
<body>
<form>
<input name="number" onkeypress="return numbersonly(event,this)">
</form>
</body>
</html>
[/HTML]
rnd me's Avatar
Expert
 
Join Date: Jun 2007
Location: Urbana IL
Posts: 411
#7: Sep 16 '08

re: Field constraint


it allow 6 because it only look at the current .value of the input. that is to say that is is always "one step behind", looking only at the previous approved numbers that have been placed in the input.


i would imagine that converting the .value into a number ( Number(val) ), and simply verifying that it is positive and less than the maximum value would be a heck of a lot simpler, faster, and more compatible way of doing it.
rnd me's Avatar
Expert
 
Join Date: Jun 2007
Location: Urbana IL
Posts: 411
#8: Sep 16 '08

re: Field constraint


ok, i called my own bluff here, since i was bored.


does this work for you?

Expand|Select|Wrap|Line Numbers
  1. <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
  2. <html>
  3.  <head>
  4.  <title> numerical validation test</title>
  5.  <script type="text/javascript">
  6.  
  7.   function numbersonly(e,th) {
  8.     if(!e){ e= window.event; }
  9.     var key = String.fromCharCode( e.keyCode || e.which );
  10.     var val = Number( th.value + key ) || 0;
  11.     return !! (val && val < 999999.99 && val.toFixed(2) ==val );
  12. </script>
  13.  </head>
  14.  
  15.  <body>
  16.   <form>
  17.     <input name="number"  onkeypress="return numbersonly(event,this)">
  18.   </form>
  19.  </body>
  20. </html>
tested in FF3, IE6
Member
 
Join Date: Jun 2007
Posts: 99
#9: Sep 17 '08

re: Field constraint


Quote:

Originally Posted by rnd me

ok, i called my own bluff here, since i was bored.


does this work for you?

Expand|Select|Wrap|Line Numbers
  1. <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
  2. <html>
  3.  <head>
  4.  <title> numerical validation test</title>
  5.  <script type="text/javascript">
  6.  
  7.   function numbersonly(e,th) {
  8.     if(!e){ e= window.event; }
  9.     var key = String.fromCharCode( e.keyCode || e.which );
  10.     var val = Number( th.value + key ) || 0;
  11.     return !! (val && val < 999999.99 && val.toFixed(2) ==val );
  12. </script>
  13.  </head>
  14.  
  15.  <body>
  16.   <form>
  17.     <input name="number"  onkeypress="return numbersonly(event,this)">
  18.   </form>
  19.  </body>
  20. </html>
tested in FF3, IE6

This really works, thanks very much for your help :-)
but backspace key is not working in this. I modified it little to work that keys.
Hope this works in Safari too ;-)

[PHP]
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> numerical validation test</title>
<script type="text/javascript">

function numbersonly(e,th) {
if(!e){ e= window.event; }

if (window.event) {
keys = window.event.keyCode;
}
else if (e) {
keys = e.which;
}
else {
return true;
}


var key = String.fromCharCode( keys );
var val = Number( th.value + key ) || 0;
var flag = !! (val && val < 999999.99 && val.toFixed(2) ==val );


if ((keys==null) || (keys==0) || (keys==8) || (keys==9) || (keys==13) || (keys==27) ) {
return true;
}
else if(flag)
{
return true;
}else{
return false;
}



}
</script>
</head>

<body>
<form>
<input name="number" onkeypress="return numbersonly(event,this)">
</form>

<div id="some"></div><br/>
<div id="some1"></div><br/>
<div id="some2"></div><br/>
</body>
</html>[/PHP]
rnd me's Avatar
Expert
 
Join Date: Jun 2007
Location: Urbana IL
Posts: 411
#10: Sep 17 '08

re: Field constraint


glad to hear you got it working.

i find that checking numbers as numbers simplifies a lot of validation sequences, though you don't see it much...
Member
 
Join Date: Jun 2007
Posts: 99
#11: Sep 17 '08

re: Field constraint


Quote:

Originally Posted by rnd me

glad to hear you got it working.

i find that checking numbers as numbers simplifies a lot of validation sequences, though you don't see it much...



One issue i find that it isn't allowing me to enter 0.22 and .22

Please help in this
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#12: Sep 18 '08

re: Field constraint


That's because it's not accepting either 0 or . on its own. This is the flaw with validating in this manner. To tell you the truth, I don't understand the need for this. Yes, it can be done with a bit of effort, but it's so much easier to let the user type what they want and then validate onchange/onblur (with no alerts of course) and onsubmit.
Member
 
Join Date: Jun 2007
Posts: 99
#13: Sep 18 '08

re: Field constraint


Quote:

Originally Posted by acoder

That's because it's not accepting either 0 or . on its own. This is the flaw with validating in this manner. To tell you the truth, I don't understand the need for this. Yes, it can be done with a bit of effort, but it's so much easier to let the user type what they want and then validate onchange/onblur (with no alerts of course) and onsubmit.


Acoder please tell me the other way then to do the same thing PLzzz.
I need it
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Sep 18 '08

re: Field constraint


The other way would mean you don't test onkeypress, rather you test onchange/onblur. In the function, just compare to the reg. exp. If it matches, it's passed validation, otherwise display an error message (preferably next to the text box rather than an alert).
Reply