...

View Full Version : TypeOf number within Form Validation



fireplace_tea
09-26-2012, 04:08 AM
I am learning how to do JavaScript form validation. I'm trying to use the typeof operator to make sure the user is entering numbers only in the text field. However, my code is not completely working.
Here is the HTML Coding:



<form id="myform">
<label>Name<input type="text" /></label><br /><br />
<label>Number<input type="text" id="num1" name="num1" /></label><br />
<input type="submit" value="submit" />
<input type="reset" value="clear" />
</form>



Here is the JavaScript coding:


var b = document.getElementById('num1');
var c = b.value;
b.onblur = function(){
if(typeof c == 'number'){
b.value = "this is num!";
}else{
b.value = "not a num";
}
};


I tested and can access the value within the textfield named 'num1'. I also know the onblur is working. The problem is, when I enter a number into the text field 'num1' the results gives me "not a num." No matter what I type in there I get "not a num". Any ideas?

I tried var c = parseInt(b.value); but then it see's everything (including characters) as a number. But at least I get the result of "this is num!". Still not what I need though.

Thanks,
Julie

Old Pedant
09-26-2012, 04:25 AM
That's because *ALL* form field values are *ALWAYS* strings. Period. Always.

To find out if the STRING that is in the field's value can be CONVERTED to a number, use isNaN( ).

Further, you are getting the .value of the element WHEN THE PAGE LOADS, so it will always be the BLANK string.

In your onblur function, you need to *THEN* go get the value.



var b = document.getElementById('num1');
b.onblur = function(){
if( isNaN(this.value) ){
this.value = "this is not a valid number";
}else{
this.value = "this is not NaN, so it is a number";
}
};

Of course, as soon as you execute the code, you have destroyed the value in "num1" by putting the message in there, but that's your choice.

p.s.: You don't have to use this.value. You could use b.value. But by using this, the same code could be attached to any form element.

fireplace_tea
09-26-2012, 04:54 AM
That's because *ALL* form field values are *ALWAYS* strings. Period. Always.

To find out if the STRING that is in the field's value can be CONVERTED to a number, use isNaN( ).

Further, you are getting the .value of the element WHEN THE PAGE LOADS, so it will always be the BLANK string.

In your onblur function, you need to *THEN* go get the value.



var b = document.getElementById('num1');
b.onblur = function(){
if( isNaN(this.value) ){
this.value = "this is not a valid number";
}else{
this.value = "this is not NaN, so it is a number";
}
};

Of course, as soon as you execute the code, you have destroyed the value in "num1" by putting the message in there, but that's your choice.

p.s.: You don't have to use this.value. You could use b.value. But by using this, the same code could be attached to any form element.



Thanks. :) I was starting to wonder if the field value would only return as a string. I've been doing some more research and it looks like using regular expressions is the best way to prevent anything but a number value from going into the text field. Do you think this is true?

Thanks,
Julie

Old Pedant
09-26-2012, 07:08 AM
Depends on what kinds of limits you want to place on the numbers. A regular expression is overkill if you will accept *any* kind of number (e.g., 7.281e-31 is a valid number in scientific expression, and isNaN() will say that *IS* a number...creating a regexp to handle all possible numeric values is a pain an not worthwhile. On the other hand, if you want to ask someone his/her age, which means you will only accept integers from 1 to 115, say, then a regexp might be a good idea.

Philip M
09-26-2012, 08:48 AM
Numbers Only In Here <input type = "text" id = "mytext" onkeyup="if(isNaN(value=parseInt(value))) {value=''}; if(value=='0'){value=''};">


"I am not young enough to know everything." - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum