JavaScript charAt() doesn't like user input that isn't zero

Question

this may be a stupid question or a typo but I'm going to ask anyway... I have the following form and when the form is submitted I want to check all the values of the input type="number" and make sure that if the user has for some reason put a zero at the start of the input, for example 01, 025, 0100, to remove the first zero as long as the value isn't zero. A simple piece of JavaScript made even easier with a jQuery selector. Note that all the text boxes here are type="number" not type="text" and please note my input

enter image description here

Here's my code:

$('input[type=number]').each(function(){
    // only if the string is not zero
    if(this.value.charAt(0) == "0" && this.value != "0"){
        this.value = this.value.substring(1);
    }   
});

However when I came back to test my form fully I noticed my code didn't work! So I added the following to write to the console to check what was going on:

console.log("typeof:" + typeof(this.value) + " " + this.id + " char:" + this.value.charAt(0) + " val:" + this.value )

And this gave me the following output, notice the last 4 items that don't have the value of zero:

enter image description here

Why am I not getting the this.value.charAt(0) when the user has changed the default value of zero?

@nyarlathotep: put that as an answer and I'll plus one you. The output shows spaces between "val:" and "04" (as an example in the last one). — Chris, Aug 24 '12 at 09:01
As a side comment does your code deal with multiple zeros? At a glance it looks like an input of "001" would be trimmed to "01" which is presumably not what is wanted... — Chris, Aug 24 '12 at 09:04
@Chris good suggestion, added an according handling of arbitrary zeroes to my solution! — codeling, Aug 24 '12 at 09:11
I just want to add that I was unaware of the white space. This is being produced by jquery.mobile?!?! The target device for this app is a tablet, I'm just debugging/testing in Firefox on my laptop — Mike Sav, Aug 24 '12 at 09:15

score 4 · Accepted Answer · edited May 23 '17 at 12:12

It seems that there are spaces in your value. Trim it before comparing (e.g. with jquery, or see here if you don't want to include jquery just for that):

$('input[type=number]').each(function(){
    // only if the string is not zero
    var myval = $.trim(this.value);
    this.value = myval.replace(/^[0]+/g,"");

});

The above solution removes arbitrary leading zeroes, that part was taken from this answer to a similar question.

Mitya · Answer 2 · 2012-08-24T09:26:18.123

3

This can be cut down somewhat:

$('input[type=number]').each(function() {
    this.value = this.value.replace(/^\s*0+(?=\d)/, '');
});

That will remove any leading zeros, even if there's leading white space (which is probably your problem).

edited Aug 24 '12 at 09:26

answered Aug 24 '12 at 09:01

Mitya

33,629
9
60
107

1

neat and clean, I like it :) but I'd put in a + after 0 to make it also remove multiple leading zeroes! – codeling Aug 24 '12 at 09:12
also didn't know yet about the lookaheads, something learned again :D! – codeling Aug 24 '12 at 09:16
Yeap - no lookbehinds in JS, though, which is massively annoying, although [I wrote a simulation for this](http://mitya.co.uk/blog/2011/Feb/Simulating-REGEX-look-behinds-JavaScript-153). Good point re: multiple leading zeros - edited. – Mitya Aug 24 '12 at 09:25

score 1 · Answer 3 · answered Aug 24 '12 at 08:58

1

It looks like for some reason there is preceding whitespace - use jQuery's trim function before your zero-check to ensure you've eliminated the whitespace.

answered Aug 24 '12 at 08:58

James

13,092
1
17
19

JavaScript charAt() doesn't like user input that isn't zero

3 Answers3