Html and javascript input validation

Question

I am trying to have my input only accept Numbers and the '.', it is working great but it doesn't allow for number pad number keys. I cant seem to find the exact answer online.

HTML

<input type="text" id="ItemTotal#i#" name="ItemTotal#i#" value="#qPriceAct#" onkeypress="return isNumeric(event)" onkeydown="return keyispressed(event);">

JavaScript

//prevent , and $ from being input
function keyispressed(e){
    var charval= String.fromCharCode(e.keyCode);
    if(isNaN(charval) && (e.which != 8 ) && (e.which != 190 )){
        return false;
    }
    return true;
}


//is input numeric
function isNumeric (evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode (key);
  var regex = /[0-9]|\./;
  if ( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Thanks for the help!

Have you tried pattern attribute? It is a regexp you put inside HTML and it checks validity on its own. — Azamantes
– Azamantes, Commented Sep 22, 2016 at 18:06
you mention it's used throughout your web app, is the class numbersOnly on each input that should only allow numbers? — depperm
– depperm, Commented Sep 22, 2016 at 18:25

depperm · Accepted Answer · 2016-09-22 18:56:20Z

1

The best way I believe would be to add a class to all the inputs that only allow numbers. Then you can restrict any input that doesn't match the pattern or a number/decimal.

function numberVerfication(value) {
  var pattern=/^[0-9]*(\.)?[0-9]*$/;
  if (value.match(pattern) != null){
    return value
  }
  else {
    var p=/[0-9]*(\.)?[0-9]*/;
    return value.match(p)[0];
  }

}
$('.numbersOnly').keyup(function(e) {
  e.target.value = numberVerfication(e.target.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='numbersOnly' type="text" id="ItemTotal#i#" name="ItemTotal#i#" value="#qPriceAct#">

answered Sep 22, 2016 at 18:56

depperm

10.8k4 gold badges46 silver badges68 bronze badges

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

Comments

Karthikeyan Sekar · Accepted Answer · 2016-09-22 18:29:03Z

0

Simple using REGEXP

HTML

<input type="text" class='numbersOnly' id="ItemTotali" name="ItemTotal#i" value="qPriceAct">

JQUERY

$('.numbersOnly').keyup(function (e) {
    this.value = this.value.replace(/[^0-9\.]/g, '');
});

JAVA SCRIPT

function numValidate(that){
  that.value = that.value.replace(/[^0-9\.]/g, '');  
}

<input type="text" onkeypress='numValidate(this)' onkeyup='numValidate(this)' class='numbersOnly' id="ItemTotali" name="ItemTotal#i" value="qPriceAct"/>

Demo

edited Sep 22, 2016 at 18:29

answered Sep 22, 2016 at 18:07

Karthikeyan Sekar

3333 silver badges13 bronze badges

2 Comments

Charles L. Over a year ago

yes the problem here is that its used throughout my entire web app. it needs to be within the function and not class or id specific

Karthikeyan Sekar Over a year ago

@Charles Check it now.

jsquerylover · Accepted Answer · 2016-09-22 18:31:57Z

0

function numberVerfication(value){
         return value.replace(/[^0-9.\-+]/g, '');
 }
$('.numbersOnly').keyup(function(e){
      e.target.value=numberVerfication(e.target.value);
});

answered Sep 22, 2016 at 18:31

jsquerylover

563 bronze badges

Collectives™ on Stack Overflow

Html and javascript input validation

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related