I have a JavaScript function to Validate only decimal value.I use the JavaScript onkeyup event.

function onlyNumeric(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  var exclusions = [8, 46];

  if (exclusions.indexOf(key) > -1) {
    return;
  }

  key = String.fromCharCode(key);

  var regex = /[0-9]|\./;

  if (!regex.test(key)) {
    theEvent.returnValue = false;

    if (theEvent.preventDefault) {
      theEvent.preventDefault();
    }

    return false;
  }

  return true;
}

<input type="text" onkeyup="onlyNumeric(event)" class="form-control" id="ColumnName" name="ColumnName">

I have a JavaScript function to Validate only decimal value.I use the JavaScript onkeyup event.

function onlyNumeric(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  var exclusions = [8, 46];

  if (exclusions.indexOf(key) > -1) {
    return;
  }

  key = String.fromCharCode(key);

  var regex = /[0-9]|\./;

  if (!regex.test(key)) {
    theEvent.returnValue = false;

    if (theEvent.preventDefault) {
      theEvent.preventDefault();
    }

    return false;
  }

  return true;
}

<input type="text" onkeyup="onlyNumeric(event)" class="form-control" id="ColumnName" name="ColumnName">

It's working fine when I put value not from the number pad. But when I put value by number pad it's not working. So how can i fixed it?

Also I need fix it at two decimal point. But how can I do it?

Is onkeyup event Ok for this purpose?

• javascript
• jquery
• html
• dom-events

Share Improve this question Follow edited Aug 23, 2019 at 15:00 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 23, 2017 at 8:01 AshiquzzamanAshiquzzaman 5,29444 gold badges3030 silver badges3939 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Below is the code to help you out:

function onlyNumeric(evt) {
    var pattern = /^\d{0,4}(\.\d{0,2})?$/i;
    var element = document.getElementById("ColumnName");
    if(pattern.test(element.value)) {
      console.log("Vadid number:" + element.value);
    } else {
      console.log("Invadid number:" + element.value);
    }
}

<input type="text" onkeyup="onlyNumeric(event)" class="form-control" id="ColumnName" name="ColumnName">

You can use this Regex pattern :

/^\d+(?:\.\d{1,2})?$/ 

Explanation :

\d    match a digit...   
+     one or more times    
(     begin group...     
?:    but do not capture anything     
\.    match literal dot     
\d    match a digit...     
{1,2} one or two times    
)     end group   
?     make the entire group optional 

<input type="text" onkeyup="onlyNumeric(event)" class="form-control" id="ColumnName" name="ColumnName">

<script>
function onlyNumeric(evt) {
    var rx = /^\d+(?:\.\d{1,2})?$/;
    var ele = document.getElementById("ColumnName");
    if(rx.test(ele.value)) { 
       console.log("true");
    }else{ 
       console.log("false");
    }
}
</script>

Another solution using addEventListener() instead of onkeyup:

<input type="text" class="form-control" id="ColumnName" name="ColumnName">

<script>
function onlyNumeric(evt) {
    var rx = /^\d+(?:\.\d{1,2})?$/;
    var ele = document.getElementById("ColumnName");
    if(rx.test(ele.value)) { 
       console.log("true");
    }else{ 
       console.log("false");
    }
}

var el = document.getElementById("ColumnName");
el.addEventListener("input", onlyNumeric, false);

</script>

Use this jquery plugin it validate decimal behaviour while typing and mouse click https://github./sarkfoundation/Decimal-Behavior

   <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type='text/javascript' src="https://rawgit./sarkfoundation/Decimal-Behavior/master/sark-decimal/sark-decimal.js"></script>
    <input type="text" data-behaviour="decimal">