Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    TypeOf number within Form Validation

    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:

    Code:
    <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:
    Code:
    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
    Last edited by fireplace_tea; 09-26-2012 at 03:26 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,437
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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.

    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    fireplace_tea (09-26-2012)

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

    Code:
    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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,437
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    fireplace_tea (09-26-2012)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Code:
    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)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    fireplace_tea (09-26-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •