How to allow only numbers in textbox in mvc4 razor

Question

I have 3 text box which takes values postal code  amp  mobile number  amp  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

User · Answer

Please use DataType attribue but this will except 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

User · Answer

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

User · Answer

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   gt  i Port  new    type    number        beyond the scope of the question but you could do this same approach for any html5 input type

User · Answer

in textbox write this code onkeypress  return isNumberKey event   and function for this is just below    lt script type  text javascript  gt  function isNumberKey evt              var charCode    evt which    evt which   event keyCode            if  charCode    46  amp  amp  charCode  gt  31               amp  amp   charCode  lt  48    charCode  gt  57                return false             return true     lt  script gt

User · Answer

Use a regular expression  e g     RegularExpression    1-9  0-9      ErrorMessage    Count must be a natural number    public int Count   get  set

User · Answer

function NumValidate e        var evt    e    e   window event      var charCode    evt keyCode    evt keyCode   evt which      if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  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   amp  amp   charCode  lt  48    charCode  gt  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  gt  64  amp  amp  charCode  lt  91      charCode  gt  96  amp  amp  charCode  lt  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  gt   48  amp  amp  charCode  lt   57      charCode  gt   65  amp  amp  charCode  lt   90      charCode    32      charCode  gt   97  amp  amp  charCode  lt   122         return true    else       alert  Only Text And Number        return false

User · Answer

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

User · Answer

Html TextBoxFor m   gt  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

User · Answer

Use this function in your script and put a span near textbox to show the error message   document  ready function             quot  digit quot   keypress function  e            if  e which    8  amp  amp  e which    0  amp  amp   e which  lt  48    e which  gt  57                    quot  errormsg quot   html  quot Digits Only quot   show   fadeOut  quot slow quot                return false                          Html TextBoxFor x   gt  x company ContactNumber  new    class    quot digit quot      lt span id  quot errormsg quot  gt  lt  span gt

User · Answer

Here is the javascript that will allows you to enter only numbers   Subscribe to onkeypress event for textbox    Html TextBoxFor m  gt m Phone new    onkeypress  OnlyNumeric this        Here is the javascript for it    lt script type  text javascript  gt  function OnlyNumeric e                if   e which  lt  48    e which  gt  57                     if  e which    8    e which    46    e which    0                        return true                                    else                       return false                                             lt  script gt    Hope it helps you

User · Answer

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

User · Answer

Hi try the following       lt div class  editor-field  gt     lt    Html TextBoxFor m   gt  m UserName  new  onkeydown  return ValidateNumber event        gt     lt    Html ValidationMessageFor m   gt  m UserName    gt   lt  div gt    SCRIPT   lt script type  text javascript  gt     function ValidateNumber e           var evt    e    e   window event         var charCode    evt keyCode    evt keyCode   evt which         if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57                return false                  return true

User · Answer

This worked for me     lt input type  text  class  numericOnly  placeholder  Search  id  txtSearch  gt    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  lt  48    code  gt  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

User · Answer

lt input type  quot number quot   bind  quot Quantity quot  class  quot txt2 quot    gt  Use the type  quot number quot

User · Answer

Html TextBoxFor x   gt  x MobileNo  new    class    quot digit quot     maxlength    quot 10 quot      section Scripts         Scripts Render  quot   bundles jqueryui quot        Styles Render  quot   Content cssjqryUi quot         lt script type  quot text javascript quot  gt              quot  digit quot   keypress function  e                if  e which    8  amp  amp  e which    0  amp  amp   e which  lt  48    e which  gt  57                                     quot  errormsg quot   html  quot Digits Only quot   show   fadeOut  quot slow quot                    return false                                  lt  script gt

User · Answer

for decimal values greater than zero  HTML5 works as follows    lt input id  txtMyDecimal  min  0  step  any  type  number  gt

[asp.net-mvc] How to allow only numbers in textbox in mvc4 razor

Examples related to asp.net-mvc

Examples related to asp.net-mvc-3

Examples related to asp.net-mvc-4