Javascript Input Field Validation (Number only)

Question

I want to make my input element accept only number. I want to validate it real time and turn the color of label into red when the input is not equal to 10 digit.

Help please on my js condition. Thanks.

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode

  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    document.getElementById("lbltest").style.color = "red"
    return false;
  } else {
    document.getElementById("lbltest").style.color = "green"
    return true;
  }
}

<label id="lbltest">Test</label>
<input name="txtTry" type="text" pattern=".{10,}"
       minlength="10" maxlength="10"
       onkeypress="return isNumberKey(event)">

Possible duplicate of [HTML Text Input allow only Numeric input](http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) — Mr. Polywhirl, Feb 13 '17 at 16:07
wouldn't it be easier to test if the given input is numeric? — philipp, Feb 13 '17 at 16:07
You said what you want but didn't explain what is wrong with the code you posted. You haven't explained what specific issue you are having. You haven't explained what is confusing you. — takendarkk, Feb 13 '17 at 16:36
Hi guys. Im sorry. But I explain exactly what i need to do on my post. — Let Soo Gas, Feb 13 '17 at 16:39

score 2 · Answer 1 · edited Feb 13 '17 at 16:15

2

var input=document.getElementById('input'),
    label=document.getElementById('lbltest');

input.oninput=function(){
  var value=this.value;
  var isnum = /^\d+$/.test(value);
  if(isnum && value.length===10){
    label.style.color="green";
  }else{
      label.style.color="red";
  }
      
  }

<label id="lbltest">Test </label>
<input id="input" name="txtTry" type="text" minlength="10" maxlength="10">

edited Feb 13 '17 at 16:15

Nitsan Baleli

5,393
3
30
52

answered Feb 13 '17 at 16:10

LellisMoon

4,810
2
12
24

hi. thank you so much. this is working perfectly but when i click submit button and i input 10 character, it still accept it and submitted. can we try to make it accept only number just like my previous code? – Let Soo Gas Feb 13 '17 at 16:34

Oliver Hader · Answer 2 · 2017-02-13T16:32:56.383

Since using jQuery makes it a bit easier to handle events, I've integrated the library to solve the scenario. I've kept the element attributes which you can use or remove on your own demand.

$(document).ready(function() {
  $('.validate').on('input', function(event) {
    var $element = $(this);
    var valid = true;
    if ($element.attr('pattern')) {
      var pattern = new RegExp($element.attr('pattern'));
      valid = valid && pattern.test($element.val());
    }
    if ($element.attr('minlength')) {
      value = valid && $element.val().length >= $element.attr('minlength');
    }
    if ($element.attr('maxlength')) {
      value = valid && $element.val().length <= $element.attr('maxlength');
    }
    if (!valid) {
      $element.addClass('validation-error');
    } else {
      $element.removeClass('validation-error');
    }
  });
});

<style>
.validation-error { border: 1px red solid; background: rgba(255, 0, 0, 0.25); }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="lbltest">Test </label>
<input id="input" class="validate"
       name="txtTry" type="text"
       minlength="10" maxlength="10"
       pattern="^\d{10}$">

Mamun · Answer 3 · 2018-05-10T04:40:35.340

1

Try the following:

function isNumberKey(evt){
  var charCode = (evt.which) ? evt.which : event.keyCode 
  if (charCode > 31 && (charCode < 48 || charCode > 57)){
    document.getElementById("lbltest").style.color="red"
    return false; 
  }
  else{
    if (document.getElementById("txtTry").value.length < 10){
      document.getElementById("lbltest").style.color="red"
    }
    else{
      document.getElementById("lbltest").style.color="green"
    }

    return true;
  }
}

<label id="lbltest">Test </label>
<input name="txtTry" id="txtTry" type="text" pattern=".{10,}" minlength="10" maxlength="10" onkeydown="return isNumberKey(event)">

edited May 10 '18 at 04:40

answered Feb 13 '17 at 16:53

Mamun

66,969
9
47
59

thanks mate! this is working perfectly! exactly as what i need to do! :) – Let Soo Gas Feb 14 '17 at 07:10
hi, another thing. when i try your code and when the field is null it label turns red. i want Label to retain color black when it is empty value. – Let Soo Gas Feb 14 '17 at 07:24
you can do that by adding another condition ("if(document.getElementById("txtTry").value.length == 1)") inside the if block where the length of the input is being counted. but i think doing so is not logically valid. – Mamun Feb 14 '17 at 08:16
i keep getting red color when the field is empty :( – Let Soo Gas Feb 14 '17 at 09:19

score 0 · Answer 4 · answered Jan 13 '19 at 14:42

Try use package input-only-number.

/**
 * Function exec after susses fill input fields
 * 
 * @param {Event} element 
 */
function callback(element) {
    console.log('%cValid value: ' + element.target.value, 'color: green; font-size: 2rem;');
}
 
let inputOnlyNumbers = new InputOnlyNumbers({
    className: 'input-only-numbers',
    callback: callback
});
 
inputOnlyNumbers.init();

.success {
  color: #00ff00;
}

.fail {
  color: #ff0000;
}

<script src="https://unpkg.com/input-only-numbers@1.0.6/dist/index.js"></script>
<label id="lbltest">Test</label>
<input 
  class="input-only-numbers"
  name="txtTry"
  data-limit="10"
  data-valid="success"
  data-invalid="fail"
  type="text" 
>

Javascript Input Field Validation (Number only)

4 Answers4