How to allow only numbers in textbox in mvc4 razor

Question

I have 3 text box which takes values postal code & mobile number & residential number. I got the solution for allowing only number in text box using jquery from Bellow post.

I would like to make an EditFor textbox accept numbers only

but can we do this using data annotations as I am using MVC4 razor ?

you cannot do this because data annotations are called when you submit your form, not when you enter data to your textboxes — Karthik Chintala, Feb 06 '13 at 12:35
while that is true, you can use the HTML5 input types validation rules (where supported by browser). works in this question scenario. — hubson bropa, May 24 '13 at 16:40
Possible duplicate of [Int or Number DataType for DataAnnotation validation attribute](http://stackoverflow.com/questions/4816822/int-or-number-datatype-for-dataannotation-validation-attribute) — KyleMit, Feb 21 '17 at 18:26
@KarthikChintala That is incorrect. The data annotations are also used to when rendering the form, to determine client side jQuery validations and input types for various fields. — ProfK, Mar 23 '17 at 07:44

hubson bropa · Answer 1 · 2014-10-24T15:42:43.707

112

i was just playing around with HTML5 input type=number. while its not supported by all browsers I expect it is the way going forward to handle type specific handling (number for ex). pretty simple to do with razor (ex is VB)

@Html.TextBoxFor(Function(model) model.Port, New With {.type = "number"})

and thanks to Lee Richardson, the c# way

@Html.TextBoxFor(i => i.Port, new { @type = "number" })

beyond the scope of the question but you could do this same approach for any html5 input type

edited Oct 24 '14 at 15:42

answered May 24 '13 at 15:53

hubson bropa

2,720
2
29
35

9

aka @Html.TextBoxFor(i => i.Port, new { @type = "number" }) – Lee Richardson Oct 24 '14 at 14:56
2

You can also input "-" and "+" that are characters not number. – Mr. Blond Jun 09 '16 at 08:13
This is at least partially supported in [all major browsers](http://caniuse.com/#feat=input-number) except Opera Mini. – Tobias J Aug 16 '16 at 13:19
Besides "-" and "+" characters you can input "e" character. I used Data Annotation + regex as pointed by Donal Lafferty in his answer. – alejandro zuleta Jan 14 '17 at 13:42

score 67 · Answer 2 · answered Mar 25 '14 at 11:49

67

Use a regular expression, e.g.

[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
public int Count { get; set; }

answered Mar 25 '14 at 11:49

Donal Lafferty

5,807
7
43
60

3

This should be the answer. – Oct 07 '16 at 08:40

score 58 · Answer 3 · answered Oct 05 '15 at 03:18

58

@Html.TextBoxFor(m => m.PositiveNumber, 
                      new { @type = "number", @class = "span4", @min = "0" })

in MVC 5 with Razor you can add any html input attribute in the anonymous object as per above example to allow only positive numbers into the input field.

answered Oct 05 '15 at 03:18

diegosasw

13,734
16
95
159

Pretty neat solution for front end Validation. Thanks to save my time @realaValoro :-) – Asif Mehmood Mar 05 '16 at 15:09
Where does the span4-class come from? – mischka Jul 09 '20 at 09:22
1

it's just a sample on how to specify any css class for a text box. – diegosasw Jul 09 '20 at 10:34

score 16 · Answer 4 · answered Feb 06 '13 at 12:53

16

in textbox write this code onkeypress="return isNumberKey(event)" and function for this is just below.

<script type="text/javascript">
function isNumberKey(evt)
{
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
}
</script>

answered Feb 06 '13 at 12:53

Shwet

1,848
1
24
35

javascript event is not defined firefox – Jul 23 '13 at 03:50
This wont work on a lot of smartphones as the keypress event is not available on all mobiles. – Repo May 10 '16 at 11:56
it was answered for MVC4 razr – Shwet May 10 '16 at 12:03

score 9 · Answer 5 · edited Apr 04 '21 at 20:24

Please use the DataType attribute. This will accept negative values so the regular expression below will avoid this:

   [DataType(DataType.PhoneNumber,ErrorMessage="Not a number")]
   [Display(Name = "Oxygen")]
   [RegularExpression( @"^\d+$")]
   [Required(ErrorMessage="{0} is required")]
   [Range(0,30,ErrorMessage="Please use values between 0 to 30")]
    public int Oxygen { get; set; }

score 8 · Answer 6 · answered Dec 10 '14 at 23:31

This worked for me :

<input type="text" class="numericOnly" placeholder="Search" id="txtSearch">

Javacript:

//Allow users to enter numbers only
$(".numericOnly").bind('keypress', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        return;
    }
    var code;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (e.which == 46)
        return false;
    if (code == 8 || code == 46)
        return true;
    if (code < 48 || code > 57)
        return false;
});

//Disable paste
$(".numericOnly").bind("paste", function (e) {
    e.preventDefault();
});

$(".numericOnly").bind('mouseenter', function (e) {
    var val = $(this).val();
    if (val != '0') {
        val = val.replace(/[^0-9]+/g, "")
        $(this).val(val);
    }
});

This wont work on a lot of smartphones as the keypress event is not available on all mobiles. — Repo, May 10 '16 at 11:55

score 8 · Answer 7 · edited Aug 19 '20 at 20:03

8

Use this function in your script and put a span near textbox to show the error message

$(document).ready(function () {
    $(".digit").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            $("#errormsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    });
});

@Html.TextBoxFor(x => x.company.ContactNumber, new { @class = "digit" })
<span id="errormsg"></span>

edited Aug 19 '20 at 20:03

James Skemp

8,018
9
64
107

answered Jul 13 '15 at 07:23

avc_004

81
1
2

upvoted for simple solution .I don't know why they didn't marked it as answer working like charm – Mani Sep 02 '15 at 06:43
This wont work on a lot of smartphones as the keypress event is not available on all mobiles. – Repo May 10 '16 at 11:54

score 4 · Answer 8 · answered Nov 21 '17 at 05:21

4

for decimal values greater than zero, HTML5 works as follows:

<input id="txtMyDecimal" min="0" step="any" type="number">

answered Nov 21 '17 at 05:21

Chris J

596
1
8
14

1

And how do you do this with the HTMLhelper in razor? – LarryBud Dec 28 '17 at 03:34
I attempted to use Razor, but after searching for ages, I couldn't find a solution that was this clean. – Chris J Jan 02 '18 at 05:46

score 3 · Answer 9 · answered Feb 06 '13 at 11:37

3

can we do this using data annotations as I am using MVC4 razor ?

No, as I understand your question, unobtrusive validation will only show erorrs. The simplest way is use jquery plugin:

Masked Input Plugin

answered Feb 06 '13 at 11:37

webdeveloper

17,174
3
48
47

score 2 · Answer 10 · answered Feb 06 '13 at 12:44

2

Here is the javascript that will allows you to enter only numbers.

Subscribe to onkeypress event for textbox.

@Html.TextBoxFor(m=>m.Phone,new { @onkeypress="OnlyNumeric(this);"})

Here is the javascript for it:

<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;
                }
            }
        }
</script>

Hope it helps you.

answered Feb 06 '13 at 12:44

Karthik Chintala

5,465
5
30
60

Not all Code paths return a value, and it doesn't work for me – Jul 23 '13 at 03:03
This wont work on a lot of smartphones as the keypress event is not available on all mobiles. – Repo May 10 '16 at 11:56

score 1 · Answer 11 · answered Feb 06 '13 at 12:24

Maybe you can use the [Integer] data annotation (If you use the DataAnnotationsExtensions http://dataannotationsextensions.org/) . However, this wil only check if the value is an integer, nót if it is filled in (So you may also need the [Required] attribute).

If you enable Unobtrusive Validation it will validate it clientside, but you should also use Modelstate.Valid in your POST action to decline it in case people have Javascript disabled.

score 0 · Answer 12 · answered Feb 06 '13 at 11:43

DataType has a second constructor that takes a string. However, internally, this is actually the same as using the UIHint attribute.

Adding a new core DataType is not possible since the DataType enumeration is part of the .NET framework. The closest thing you can do is to create a new class that inherits from the DataTypeAttribute. Then you can add a new constructor with your own DataType enumeration.

public NewDataTypeAttribute(DataType dataType) : base(dataType)
 { }

public NewDataTypeAttribute(NewDataType newDataType) : base (newDataType.ToString();

You can also go through this link. But I will recommend you using Jquery for the same.

score 0 · Answer 13 · answered Oct 01 '14 at 06:26

Hi try the following....

<div class="editor-field">
  <%: Html.TextBoxFor(m => m.UserName, new {onkeydown="return ValidateNumber(event);" })%>
  <%: Html.ValidationMessageFor(m => m.UserName) %>
</div>

SCRIPT

<script type="text/javascript">
   function ValidateNumber(e) {
       var evt = (e) ? e : window.event;
       var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
       if (charCode > 31 && (charCode < 48 || charCode > 57)) {
           return false;
       }
       return true;
   };

This wont work on a lot of smartphones as the keypress event is not available on all mobiles. — Repo, May 10 '16 at 11:56

score 0 · Answer 14 · edited Jul 17 '20 at 12:25

@Html.TextBoxFor(x => x.MobileNo, new { @class = "digit" , @maxlength = "10"})

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
         $(".digit").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
            {
                $("#errormsg").html("Digits Only").show().fadeOut("slow");
                return false;
            }
         });
    </script>
}

score 0 · Answer 15 · answered Oct 13 '20 at 10:29

0

Use the type="number"

answered Oct 13 '20 at 10:29

Ashandra Singh

188
3

score -1 · Answer 16 · answered Dec 08 '17 at 13:25

function NumValidate(e) {
    var evt = (e) ? e : window.event;
    var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        alert('Only Number ');
        return false;
    }    return true;
}  function NumValidateWithDecimal(e) {

var evt = (e) ? e : window.event;
var charCode = (evt.keyCode) ? evt.keyCode : evt.which;

if (!(charCode == 8 || charCode == 46 || charCode == 110 || charCode == 13 || charCode == 9) && (charCode < 48 || charCode > 57)) {
    alert('Only Number With desimal e.g.: 0.0');
    return false;
}
else {
    return true;
} } function onlyAlphabets(e) {
try {
    if (window.event) {
        var charCode = window.event.keyCode;
    }
    else if (e) {
        var charCode = e.which;
    }
    else { return true; }

    if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 46) || (charCode == 32))
        return true;
    else
        alert("Only text And White Space And . Allow");
    return false;

}
catch (err) {
    alert(err.Description);
}} function checkAlphaNumeric(e) {

if (window.event) {
    var charCode = window.event.keyCode;
}
else if (e) {
    var charCode = e.which;
}
else { return true; }

if ((charCode >= 48 && charCode <= 57) || (charCode >= 65 && charCode <= 90) || (charCode == 32) || (charCode >= 97 && charCode <= 122)) {
    return true;
} else {
    alert('Only Text And Number');
    return false;
}}

Usually it's better to explain a solution instead of just posting some rows of anonymous code. You can read [How do I write a good answer](https://stackoverflow.com/help/how-to-answer), and also [Explaining entirely code-based answers](https://meta.stackexchange.com/questions/114762/explaining-entirely-%E2%80%8C%E2%80%8Bcode-based-answers) — Anh Pham, Dec 08 '17 at 13:45

How to allow only numbers in textbox in mvc4 razor

16 Answers16

Linked