My javascript validation of number function does not work correctly

Question

function ValidateShippedQuantity() {
    var shippedQty = jQuery("#txtShippedQuantity").val();
    shippedQty = shippedQty.toString();
    for (i = 0; i < shippedQty.length; i++) {
        var c = shippedQty.charAt(i);
        if (isNaN(c)) //(!(/^\d+$/.test(shippedQty))) 
        {
            alert("Only Numeric Values Allowed");
            //x.focus();
            return false;
        }
    }
    return true;
}

What I want is to check the textbox that contains only numeric value. And the function above either isNaN or /^\d+$/.test() does not work since it always returns false whatever I enter such as "1" or "10". Even weird, the isNaN used to work for a while. And then it just did not work later no matter what I undid what I did.

The button which called the validation function, is within a Gridview.

<EditItemTemplate>
 <asp:LinkButton ID="btnUpdTrk" runat="server" Text="Update" CommandName="Update"
    OnClientClick="javascript:return ValidateShippedQuantity();" CausesValidation="false" />
</EditItemTemplate>

The textbox of txtShippedQuantity,

<asp:TemplateField HeaderText="Shipped&nbsp;Qty">
   <ItemTemplate>
     <asp:Label ID="lblShippedQuantity" runat="server" Text='<%#Eval("ShippedQuantity")%>'></asp:Label>
   </ItemTemplate>
   <EditItemTemplate>
     <asp:TextBox runat="server" ID="txtShippedQuantity" Width="50px" Text='<%#Eval("ShippedQuantity")%>' />
   </EditItemTemplate>
</asp:TemplateField>

For those who has the same problem, the answer or solution is below. This is the real happiness of solving the problem yourself after disappointing procedure. @cymen gives me a little help. And I change one line to his codes.

        $(document).ready(function () {
        $('#btnUpdTrk').on('click', ValidateShippedQuantity);
        });
        function ValidateShippedQuantity() {
        var shippedQty = document.getElementById('ContentPlaceHolder1_gvTrkInfo_txtShippedQuantity_0').value;
        var shippedQtyNumber = parseInt(shippedQty, 10);
        if (shippedQtyNumber.toString() !== shippedQty) {
            alert("Only Numeric Values Allowed for Tracking #.");
            return false;
        }
        return true;
    }

The second line from @cymen codes, is the cause of problem for my aspx page, at least after editing that I got what I wanted. I think it's the getTlementById part. After finding the correct ID for txtbox txtShippedQuantity from the google chrome developer tool.

I believe the line should be var c = shippedQty.charAt(i); if (isNaN(c)) — Brad M
– Brad M, Commented Feb 21, 2013 at 19:59
No need to test each character, just need return /^\d+$/.test(jQuery("#txtShippedQuantity").val()) — Ruan Mendes
– Ruan Mendes, Commented Feb 21, 2013 at 20:26

Cymen · Accepted Answer · 2013-02-21 20:16:33Z

2

You can use parseInt to parse the input string to number and then compare the number to the original string:

var input = '5';
var number = parseInt(input, 10);
if (number.toString() === input) {
    // valid
} else {
    // invalid
}

So I would write you function as:

function ValidateShippedQuantity() {
    var shippedQty = jQuery("#txtShippedQuantity").val();
    var shippedQtyNumber = parseInt(shippedQty, 10);
    if (shippedQtyNumber.toString() !== shippedQty) {
        alert("Only Numeric Values Allowed");
        return false;
    }
    return true;
}

Here is a functioning demo (with additional alert on valid): http://jsfiddle.net/S4CQT/

Note that this will fail if they enter 1,000 as it will check if '1000' equals '1,000'. So if you want to support commas, you have a couple of options but a quick way (that would consider 10,00 to be valid), would be to change the statement in the if to this:

shippedQtyNumber.toString() !== shippedQty.replace(',', '')

Another potential failure is if you allow non-whole numbers (like 10.5). In that case, look into parseFloat.

edited Feb 21, 2013 at 20:16

answered Feb 21, 2013 at 19:58

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tiger Over a year ago

thanks. it's whole numbers. and i tried your codes which has the same issue. no luck.

Cymen Over a year ago

There is a problem with how you are hooking it up then. Here is a jsfiddle that shows it working: jsfiddle.net/S4CQT

Tiger Over a year ago

yeah. i added more details above.

Tiger Over a year ago

i still do not know why clearly. but i fix the problem. see my problem description above.

Matthew Shea · Accepted Answer · 2013-02-21 20:10:17Z

1

Use the ASP.NET validators

<asp:RegularExpressionValidator ValidationExpression="^\d+$" 
    ControlToValidate="txtShippedQuantity" runat="server" 
    Text="Must be a number" Color="Red" Display="Dynamic" />

This will prevent a postback client side if it does not match the specified regular expression.

Alternatively, you can use the RangeValidator

<asp:RangeValidator 
    MinimumValue='<%# Int32.MinValue %>' 
    MaximumValue='<%# Int32.MaxValue %>' 
    ControlToValidate="txtShippedQuantity" 
    runat="server" />

edited Feb 21, 2013 at 20:10

answered Feb 21, 2013 at 19:57

Matthew Shea

5675 silver badges14 bronze badges

13 Comments

Ruan Mendes Over a year ago

This should be a suggestion, since it is a workaround (a fine one)

Matthew Shea Over a year ago

How is it a workaround? It's the standardized built-in way to validate controls in ASP.NET

Ruan Mendes Over a year ago

The question is about the JS, you can workaround having to write your own JS by using ASP.NET validators

Tiger Over a year ago

i tried your way.but this does not work with my codes. the validation should be triggered after a linkbutton is pressed. that's why i used javascript to stop the action before taking effect.

Matthew Shea Over a year ago

The question is also tagged as ASP.NET, meaning the standardized ASP.NET way is a valid answer.

|

epascarello · Accepted Answer · 2013-02-21 19:59:45Z

0

Um, shouldn't

if (isNaN(shippedQty))

be

if (isNaN(c))

And why are you looping when a regular expression can check for numbers?

answered Feb 21, 2013 at 19:59

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

defau1t · Accepted Answer · 2013-02-21 20:17:06Z

You could use the below approach, that said I don't see anything wrong with your approach to validate this.

<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
        <script type="text/javascript">
        function ValidateShippedQuantity() { 
    var shippedQty = jQuery("#txtShippedQuantity").val(); //alert(shippedQty);
    shippedQty = shippedQty.toString();
    for (i = 0; i < shippedQty.length; i++) {
        var c = shippedQty.charAt(i);
        if (isNaN(c))         {
            alert("Only Numeric Values Allowed");
            //x.focus();
            return false;
        }

    }
    if(shippedQty.length == 0)
        {
            alert("Field can't be blank");
        }
    return true;
    $("form").submit();
}
    </script>
</head>
<body>
    <form method="GET">
    <input type="text" id="txtShippedQuantity" /><br /><br />
    <input type="submit" value="Validate" onclick="ValidateShippedQuantity()" />
</form>
</body>
</html>

I think you are making the mistake by not being able to call the function properly.

I have added a demo too at JSFIDDLE

Andy Lastname · Accepted Answer · 2013-02-21 20:23:09Z

0

function ValidateShippedQuantity() {
    var reg = new RegExp("^[0-9]+$");
    return reg.test(jQuery("#txtShippedQuantity").val());
}

answered Feb 21, 2013 at 20:23

Andy Lastname

864 bronze badges

Comments

Trevor Dixon · Accepted Answer · 2013-02-21 20:25:48Z

0

http://jsfiddle.net/4nXT3/

function ValidateShippedQuantity() {
    var shippedQty = jQuery("#txtShippedQuantity").val();
    if (isNaN(shippedQty)) {
        alert('Only Numeric Values Allowed');
        return false;
    }
    return true;
}

Update: read the comments to know why this bad.

edited Feb 21, 2013 at 20:25

answered Feb 21, 2013 at 20:03

Trevor Dixon

24.6k13 gold badges77 silver badges115 bronze badges

8 Comments

Ruan Mendes Over a year ago

isNaN() called on a string is never going to return true, you proably meant isNan(parseInt(shippedQty), 10)

Trevor Dixon Over a year ago

In Chrome console, isNaN("10a") -> true

Ruan Mendes Over a year ago

I stand corrected. But I'm reluctant to upvote because it seems that isNaN() does return a lot of false positives, and should be avoided developer.mozilla.org/en-US/docs/JavaScript/Reference/… "The next version of ECMAScript (ES6) contains the function Number.isNaN... a reliable way to test whether x is NaN or not... as the result is not subject to the false positives that make isNaN unreliable.

Ruan Mendes Over a year ago

This is another example from the MDN page: "This is a false positive and the reason why isNaN is not entirely reliable"isNaN("blabla") => true "blabla" is converted to a number. Parsing this as a number fails and returns NaN"

Trevor Dixon Over a year ago

That's good; that's the desired behavior for his purposes. The one that's troubling is isNaN(' ') -> false.

|

Community · Accepted Answer · 2017-05-23 12:04:50Z

0

All you need is something that tests if all the characters are digits. No need to loop through each character, just use regular expressions http://jsfiddle.net/4nXT3/ This will not be as easy if you need to support floats or other input formats, in which case you need something more complicated like what was suggested by Cymen

function ValidateShippedQuantity() 
    var input = jQuery("#txtShippedQuantity").val();
    if ( !/^\d+$/.test(input) )  {
        alert('Only Numeric Values allowed')
        return false;
    }
    return true
}

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Feb 21, 2013 at 20:31

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

Collectives™ on Stack Overflow

My javascript validation of number function does not work correctly

7 Answers 7

4 Comments

13 Comments

Comments

Comments

Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

13 Comments

Comments

Comments

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related