Javascript - validation numbers only

Question

I m trying to get my login form to only validate if only numbers were inputted  I can it to work if the input is only digits  but when i type any characters after a number  it will still validate etc  12akf will work  1am will work  How can i get past this   Part of the Login   lt form name  myForm  gt       lt label for  firstname  gt Age   lt  label gt       lt input name  num  type  text  id  username  size  1  gt       lt input type  submit  value  Login  onclick  return validateForm    gt   function validateForm          var z   document forms  myForm    num   value      if  z match    d                       alert  Please only enter numeric characters only for your Age   Allowed input 0-9

User · Answer

var elem   document getElementsByClassName  number-validation      use the CLASS in your input field  for  i   0  i  lt  elem length  i         elem i  addEventListener  keypress   function event         var keys    48  49  50  51  52  53  54  55  56  57  0         var validIndex   keys indexOf event charCode         if validIndex    -1            event preventDefault

User · Answer

x000D   x000D  function validateNumber e    x000D              const pattern      0-9     x000D   x000D              return pattern test e key   x000D            x000D    x000D    lt input name  username  id  username  onkeypress  return validateNumber event   gt  x000D   x000D   x000D      This approach doesn t lock numlock numbers  arrows  home  end buttons and etc

User · Answer

This one worked for me    function validateForm       var z   document forms  myForm    num   value     if     0-9     test z        alert  Please only enter numeric characters only for your Age   Allowed input 0-9

User · Answer

Match against    d        means  end of line   so any non-digit characters after the initial run of digits will cause the match to fail   Edit   RobG wisely suggests the more succinct   D  test z   This operation tests the inverse of what you want  It returns true if the input has any non-numeric characters   Simply omit the negating    and use if   D  test z

User · Answer

The simplest solution   Thanks to my partner that gave me this answer   You can set an onkeypress event on the input textbox like this   onkeypress  validate event    and then use regular expressions like this   function validate evt        evt value   evt value replace    0-9  g          It will scan and remove any letter or sign different from number in the field

User · Answer

Late answer but may be this will help someone  function isNumber n      return  isNaN parseFloat n    amp  amp  isFinite n       Use will be like  nn document forms  myForm    num   value   ans isNumber nn    if ans          only numbers     This ans was found from here with huge vote  Validate numbers in JavaScript - IsNumeric

User · Answer

If you are using React  just do    lt input   value  this state input    placeholder  Enter a number    onChange  e   gt  this setState   input  e target value replace    0-9  g            gt     x000D   x000D   lt div id  root  gt  lt  div gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 2 react js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 4 2 react-dom js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs babel-standalone 6 21 1 babel min js  gt  lt  script gt  x000D   lt script type  text babel  gt  x000D  class Demo extends React Component   x000D      state     x000D        input      x000D        x000D       x000D      onChange   e   gt    x000D        let input   e target value replace    0-9  g       x000D        this setState   input     x000D        x000D       x000D      render     x000D          return   x000D             lt div gt  x000D               lt input x000D                value  this state input  x000D                placeholder  Enter a number  x000D                onChange  this onChange  x000D                gt  x000D               lt br   gt  x000D               lt h1 gt  this state input  lt  h1 gt  x000D              lt  div gt  x000D             x000D        x000D    x000D   x000D  ReactDOM render  lt Demo   gt   document getElementById  root     x000D   lt  script gt  x000D   x000D   x000D

User · Answer

here is how to validate the input to only accept numbers this will accept numbers like 123123123 41212313   lt input type  text   onkeypress  if   isNaN this value   String fromCharCode event keyCode     return false     gt    and this will not accept entering the dot      so it will only accept integers   lt input type  text   onkeypress  if   isNaN  String fromCharCode event keyCode     return false     gt    this way you will not permit the user to input anything but numbers

User · Answer

No need for the long code for number input restriction just try this code       It also accepts valid int  amp  float both values    Javascript Approach   x000D   x000D  onload  function     x000D    var ele   document querySelectorAll   number-only   0   x000D    ele onkeypress   function e    x000D       if isNaN this value    String fromCharCode e charCode    x000D          return false  x000D      x000D    ele onpaste   function e   x000D       e preventDefault    x000D      x000D    x000D   lt p gt  Input box that accepts only valid int and float values  lt  p gt  x000D   lt input class  number-only  type text   gt  x000D   x000D   x000D    jQuery Approach   x000D   x000D    function    x000D   x000D        number-only   keypress function e    x000D   if isNaN this value    String fromCharCode e charCode    return false  x000D       x000D     on  cut copy paste  function e   x000D   e preventDefault    x000D        x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt p gt  Input box that accepts only valid int and float values  lt  p gt  x000D   lt input class  number-only  type text   gt  x000D   x000D   x000D    The above answers are for most common use case - validating input as a number      But to allow few special cases like   negative numbers  amp  showing the invalid keystrokes to user before   removing it  so below is the code snippet for such special use cases     x000D   x000D    function    x000D         x000D        number-only   keyup function e    x000D          if this value   -   x000D            while isNaN this value   x000D              this value   this value split     reverse   join     replace    D  i     x000D                                      split     reverse   join      x000D         x000D       on  cut copy paste  function e   x000D       e preventDefault    x000D          x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt p gt  Input box that accepts only valid int and float values  lt  p gt  x000D   lt input class  number-only  type text   gt  x000D   x000D   x000D

User · Answer

I use this jquery it works perfect  just add class nosonly to any textbox  that should be numbers only     document  ready function                 nosonly   keydown function  event                  Allow only backspace and delete            if  event keyCode    46    event keyCode    8                      let it happen  don t do anything                         else                     Ensure that it is a number and stop the keypress                if  event keyCode  lt  48    event keyCode  gt  57                  alert  Only Numbers Allowed   event preventDefault

User · Answer

Regular expressions are great  but why not just make sure it s a number before trying to do something with it   function addemup     var n1   document getElementById  num1    var n2   document getElementById  num2    sum   Number n1 value    Number n2 value       if Number sum             alert sum             else               alert  Numbers only  please

User · Answer

I think we do not accept long structure programming we will add everytime shot code see below answer    x000D   x000D   lt input type  text  oninput  this value   this value replace    0-9   g       this value   this value replace           g    1      gt  x000D   x000D   x000D

User · Answer

Using the form you already have   var input   document querySelector  form name myForm   username     input onkeyup   function         var patterns      0-9  g      var caretPos   this selectionStart       this value   input value replace patterns           this setSelectionRange caretPos  caretPos       This will delete all non-digits after the key is released

User · Answer

function ValidateNumberOnly     if   event keyCode  lt  48    event keyCode  gt  57         event returnValue   false        this function will allow only numbers in the textfield

[javascript] Javascript - validation, numbers only

Examples related to javascript

Examples related to validation

Examples related to numbers