Field constraint

**pronerd** · Sep 10 '08, 07:27 PM

Google for JavaScript pattern matching examples using regular expressions.

**acoder** · Sep 11 '08, 01:25 PM

For all things reg-expy, http://www.regular-expressions.info/ is a good resource.

**buntyindia** · Sep 12 '08, 01:56 PM

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** · Sep 12 '08, 02:06 PM

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.

**buntyindia** · Sep 16 '08, 02:01 PM

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,t h) {
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.ke yCode;
}
else if (e) {
key = e.which;
}
else {
return true;
}
keychar = String.fromChar Code(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="ret urn numbersonly(eve nt,this)">
</form>
</body>
</html>
[/HTML]

**rnd me** · Sep 16 '08, 09:18 PM

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** · Sep 16 '08, 09:35 PM

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

does this work for you?

Code:

<!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; }
	var key = String.fromCharCode( e.keyCode || e.which );
	var val = Number( th.value + key ) || 0;
	return !! (val && val < 999999.99 && val.toFixed(2) ==val );
} 
</script>
 </head>

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

tested in FF3, IE6

**buntyindia** · Sep 17 '08, 02:40 AM

Originally posted by rnd me

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

does this work for you?

Code:

<!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; }
	var key = String.fromCharCode( e.keyCode || e.which );
	var val = Number( th.value + key ) || 0;
	return !! (val && val < 999999.99 && val.toFixed(2) ==val );
} 
</script>
 </head>

 <body>
  <form>
    <input name="number"  onkeypress="return numbersonly(event,this)">
  </form>
 </body>
</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,t h) {
if(!e){ e= window.event; }

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

var key = String.fromChar Code( 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="ret urn numbersonly(eve nt,this)">
</form>

<div id="some"></div><br/>
<div id="some1"></div><br/>
<div id="some2"></div><br/>
</body>
</html>[/PHP]

**rnd me** · Sep 17 '08, 05:36 AM

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

**buntyindia** · Sep 17 '08, 10:20 AM

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** · Sep 18 '08, 02:17 PM

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.

**buntyindia** · Sep 18 '08, 02:58 PM

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** · Sep 18 '08, 03:57 PM

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).

Field constraint

Field constraint

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment