9

How to restrict the input field to enter only numbers/digits int and float both. Sometimes we need to allow both integer as well as float value for fields like amount, so in that case the validation is required. There are no of solutions available but they are of large size code. So need a short but effective code.

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
1
  • 1
    The hybrid (HTML5/Javascript) solutions have the advantage that some mobile devices present a soft keyboard optimised for entering numbers.
    – MZB
    Jun 21, 2015 at 16:33

6 Answers 6

19

No need for the long code for number input restriction just try this code.

It also accepts valid int & float both values.

Javascript Approach

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery Approach

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

UPDATE

The above answers are for most common use case - validating input as a number.

But as per comments, some wants to allow few special cases like negative numbers & showing the invalid keystrokes to user before removing it, so below is the code snippet for such special use cases.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

14
  • 1
    I didn't realize that isNaN checks for decimals as well. Upvoted for elegance. :) Do you know if this works with on screen keyboards or keyboard assistants that type on behalf of the user ? Jun 14, 2015 at 22:55
  • @SanuelJackson thanks. Yes this works with onscreen keyboards, you can try OS's on-Screen keyboard, as its same event is captured. And by with keyboard assistants you mean the autofill feature of browsers then no for that you need some extra code. .change(function(e) { if(isNaN(this.value)) this.value=""; })
    – vinayakj
    Jun 15, 2015 at 16:38
  • OP may not care, but this only works with non-negative numbers. It won't accept -1. Jun 15, 2015 at 23:41
  • @GuySchalnat I would care ofcourse.. why not.. but the above code is for most common case and for some special cases like allowing-negative numbers also you can add one more condition and rest of the code can stay as is.
    – vinayakj
    Jun 16, 2015 at 14:51
  • @GuySchalnat Updated the answer to address the concerns about special cases - negative nos & - showing invalid keystrokes.
    – vinayakj
    Jun 20, 2015 at 14:31
12
+50

One-liner solution #1:

Use <input type="number"> with the step attribute.

<input type="number" step="0.0001"> // The user can enter up to 4 decimal places.

<input type="number" step="any"> // Not supported in all browsers, but permits numbers of any decimal precision.

You can also use the min and/or max attributes to set the minimum value and/or the maximum value.


One-liner solution #2:

Use a regular text input element with a RegExp pattern attribute.

<input type="text" pattern="^-?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)$">

This RegExp accepts numbers beginning with a dot ( . ) and/or a negative sign ( - ).

2
  • 3
    Just a footnote on this answer. This input type is only valid in HTML5, current html5 tag support Jun 14, 2015 at 23:00
  • 2
    Few things that matter here: 1. Thats HTML5 feature 2. Look & feel is different per browser 3. on the go validation not available 4. for validation that is too on submit you have to have form tag enclosing this. 5. Error messages are not same across all browsers
    – vinayakj
    Jun 15, 2015 at 16:14
4

First things first. I prefer showing the invalid keystrokes rather than preventing them. User Experience Stack Exchange seems to agree at the moment (see this question).

That said, not everyone agrees, so let's see what we can do.

Second. This doesn't replace a validation step. There are certain valid keystroke combinations that are not valid numbers, but need to be permitted in order to enter valid numbers. For example, the user could type a decimal mark (full stop or comma, depending on the language they are using), and then leave the text box, and you don't have a valid number. The following strings are all starts of numbers, but not yet valid:

  • .
  • -.
  • ,
  • -,

The first two are the start of .5 or -.5, while the last two are the same in the various languages that use a comma instead of a full stop for the decimal mark.

This brings us to the (already rejected)

<input type="number" step="any">

Of course, you will have to include a JavaScript script to fix non-modern browsers, but those are available. In theory, these should also work correctly when the user works in a language that uses the comma instead of the full stop for the decimal mark. Even better, since users usually use only one browser, and since they will be used to how input number works in that browser, and since they will spend most of their time on other websites than yours, they may get confused if your website does not behave the same way they are used to.

But maybe you still want to make your own solution. If all else fails, I would go with a regular expression (yes, I know, I now have two problems). I don't believe in allowing spaces, so I limit it to a negative sign, digits, and one decimal mark (whichever they are using). For example:

$('.rational-number').on('keypress', function(e)
{
  if (e.charCode >= 32 && e.charCode < 127 && 
      !/^-?\d*[.,]?\d*$/.test(this.value + '' + String.fromCharCode(e.charCode)))
  {
    return false;
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type-"text" class="rational-number">

This ALMOST works. The only problem I now have is, it assumes any character you type goes at the end of the string. This is fine except for the '-' for negative numbers, which is only allowed at the beginning. So you can type -5.4, but if you type 5.4 and then hit the home key or left arrow back to the beginning, it won't let you make it negative.

It also won't deal with pasting. Paste is a complicated topic. I don't agree with rejecting all paste operations. I feel the best option here is to just let the user paste and let the validator pick up any invalid numbers.

3

You can add a pattern attribute to the input field. If the input value doesn't match the pattern, you can style the input field and/or show an error message by using the css selector :invalid:

.error-msg {
  display: none; /* Hide by default */
}
.number-only:invalid {
  background: pink;
}
.number-only:invalid + .error-msg {
  display: inline;
}
<input type='tel' class='number-only' pattern='[+\-]?\d*\.?\d+' />

<span class='error-msg'>Please enter a valid integer or float value.</span>

Some notes:

  • type='tel' makes mobile browsers open a number keyboard, but of course you can also set the type to text.
  • Browser support for the pattern input attribute: http://caniuse.com/#feat=input-pattern
  • Browser support for the :invalid css selector: http://caniuse.com/#feat=form-validation
  • The pattern regex doesn't support exponential notation, e.g. 1.23e4.
  • The pattern regex doesn't allow spaces – they are not valid in int and float notation, but allowing them might improve user experience.
1
  • 1
    If application is for modern browsers only with HTML5 support then this would work, but this code is for modern browsers with no restriction on invalid key entry, though totally dependent on UX wanted, so for other browsers need to have native validation script. Upvote for detailed explaination
    – vinayakj
    Jun 21, 2015 at 14:02
1

Call one jquery function in onkeypress of the textbox. In that function use the respective ascii code to restrict input.

3
  • yes.. then I have to go on comparing the ASCII code for each invalid key and code becomes bigger, but need is for minimal code with near all use cases coverage
    – vinayakj
    Jun 21, 2015 at 7:43
  • function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } else { return true; } } call this method in textbox onkeypress Jun 21, 2015 at 13:58
  • see first comment there it explains its limitation. stackoverflow.com/questions/891696/…
    – vinayakj
    Jun 21, 2015 at 14:08
-5

User can not enter Decimal value in js. Try using this code :

if(document.getElementById(id).value.indexOf('.') != -1){
    print "do not Enter decimal nuber";
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.