How to assign only numbers to text box in MVC view

Question

I have put a text box where i want only numbers. I want to validate it in the client side and written the following code

@using (Html.BeginForm("LoyaltyPoints","Cart",FormMethod.Post))
{
<label>Enter point:</label>
<br />
@Html.TextBoxFor(m => m.txtLoyaltyPoints, new { @onkeypress = "OnlyNumeric(this)" })
<br />
<input type="submit" value="Submit" />
<br />
@ViewBag.LoyaltyPointsErrorMessage
}

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
function OnlyNumeric(e) {
    if ((e.which < 48 || e.which > 57)) {
        if (e.which == 8 || e.which == 46 || e.which == 0) {
            return true;
        }
        else {
            return false;
        }
    }
}

now here my javascript is not firing. i tried keeping alert here but not working as intended. What could be the error. please help.

Cassini · Accepted Answer · 2013-12-24 13:55:27Z

2

use the following code:

@Html.TextBoxFor(m => m.txtLoyaltyPoints, new {@id ="txtLoyalty" })`


<script type="text/javascript">
$(document).ready(function () {
    $("#txtLoyalty").keydown(function (event) {
        if (event.shiftKey) {
            event.preventDefault();
        }
        if (event.keyCode == 46 || event.keyCode == 8) {
        }
        else {
            if (event.keyCode < 95) {
                if (event.keyCode < 48 || event.keyCode > 57) {
                    event.preventDefault();
                }
            }
            else {
                if (event.keyCode < 96 || event.keyCode > 105) {
                    event.preventDefault();
                }
            }
        }
    });
});

edited Dec 24, 2013 at 13:55

Cassini

752 gold badges3 silver badges16 bronze badges

answered Dec 24, 2013 at 13:53

Ranjith Kumar Nagiri

8613 gold badges18 silver badges42 bronze badges

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

Comments

zooblin · Accepted Answer · 2016-03-25 11:49:36Z

2

@Html.TextBoxFor(m => m.Height, new { @type = "number", @onkeypress = "ValidateNumber(event);" })

function ValidateNumber(event) {

var theEvent = event || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;

if (!regex.test(key)) {
    theEvent.preventDefault ? theEvent.preventDefault() : (theEvent.returnValue = false); 
}

edited Mar 25, 2016 at 11:49

answered Mar 23, 2015 at 11:32

zooblin

2,5082 gold badges31 silver badges36 bronze badges

Comments

Arindam Nayak · Accepted Answer · 2013-12-24 13:59:58Z

1

You can replace onkeypress with onblur

i.e.

@Html.TextBoxFor(m => m.txtLoyaltyPoints, new { @onblur = "OnlyNumeric(this)" })

answered Dec 24, 2013 at 13:59

Arindam Nayak

7,4904 gold badges36 silver badges51 bronze badges

Comments

Cassini · Accepted Answer · 2013-12-24 14:06:12Z

1

<td class="field_nameW">

[email protected]("PayFromBankId3_Amount", 0.00M, new { @class = "amount_field", @onblur = "FormatAmountDecimal(this,3);", @size = "7", title = "Amount", @maxlength = "11" })

<script>

 $('#Id').numeric({ allow: "." });

 </script>

edited Dec 24, 2013 at 14:06

Cassini

752 gold badges3 silver badges16 bronze badges

answered Dec 24, 2013 at 14:02

Magesh Tamilselvan

111 silver badge6 bronze badges

Comments

Liam · Accepted Answer · 2016-06-13 14:25:08Z

0

@Html.TextBoxFor(m => m.txtLoyaltyPoints, new { @onkeypress = "return onlyNos(event,this);" })


<script>
  function onlyNos(e, t) {<br/>

        if (window.event) {<br/>
            var charCode = window.event.keyCode;<br/>
        }<br/>
        else if (e) {<br/>
            var charCode = e.which;<br/>
        }<br/>
        else { return true; }<br/>
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {<br/>
            alert("Please Enter only Numbers");<br/>
            return false;<br/>
        }<br/>
        return true;<br/>
    }
</script>

edited Jun 13, 2016 at 14:25

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Jun 13, 2016 at 14:15

Mohamed Khan

1

Collectives™ on Stack Overflow

How to assign only numbers to text box in MVC view

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related