I am trying to validate that an html input type number is not empty and has numerical values only. Both have to be true

<input type="number">

if(  node.value !== "" && !node.value.match(/^\d+$/) ){
         error = true
}

this does not work because non numerical values return an empty string.

if I input 'ffff' I get empty string

If the field is empty it also returns empty string

now instead of node.value !== "" I try node.value.length !== 0

if I input 'ffff' I get 4

If the field is empty I get nothing

question: can you think of a way to validate that a number type is not empty if I input non numerical values like fffff

I am trying to validate that an html input type number is not empty and has numerical values only. Both have to be true

<input type="number">

if(  node.value !== "" && !node.value.match(/^\d+$/) ){
         error = true
}

this does not work because non numerical values return an empty string.

if I input 'ffff' I get empty string

If the field is empty it also returns empty string

now instead of node.value !== "" I try node.value.length !== 0

if I input 'ffff' I get 4

If the field is empty I get nothing

question: can you think of a way to validate that a number type is not empty if I input non numerical values like fffff

• javascript

Share Improve this question Follow edited Aug 22, 2018 at 11:55 Sam asked Aug 22, 2018 at 11:38 SamSam 1,86844 gold badges3333 silver badges6161 bronze badges 5

• 2 but why you want to check for letters if the input only allow numbers? – Calvin Nunes Commented Aug 22, 2018 at 11:43
• because the browser accepts non numerical input and this causes me trouble down the line. – Sam Commented Aug 22, 2018 at 11:45
• which browser are you using? Here for me, my browser don't allow me to type non numerical or even paste non numerical. But ok, there's answers below that will help you – Calvin Nunes Commented Aug 22, 2018 at 11:46
• safari :))))))) – Sam Commented Aug 22, 2018 at 11:51
• Also Firefox, and it's a wontfix bug there bugzilla.mozilla/show_bug.cgi?id=1398528 – MTJ Commented Dec 13, 2018 at 13:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

To test if an input field contains a numerical value you can use either

let number = parseFloat(yourInput.value);
if(!isNaN(number)) {
}

or

let number = parseInt(yourInput.value, 10);
if(!isNaN(number)) {
}

depending on whether you want a decimal number (parseFloat) or an integer (parseInt).

If your input is empty, both functions return NaN.

Sample snippet:

let button = document.getElementById('button');
let input = document.getElementById('input');

button.addEventListener('click', function() {

  console.clear();
  
  let numberInt = parseInt(input.value, 10);

  if (!isNaN(numberInt)) {
    console.log('Input contains an int: ' + numberInt);
  } else {
    console.log('Input does not contain an int: ' + numberInt);
  }
  
  
  let numberFloat = parseFloat(input.value);
  
  if (!isNaN(numberFloat)) {
    console.log('Input contains a float: ' + numberFloat);
  } else {
    console.log('Input does not contain a float: ' + numberFloat);
  }
  
});

<input type="text" id="input">
<button type="button" id="button">Check</button>

I've used a text input here, because in some browsers you can still enter non-numerical values even though the input has a type of "number". So you should always validate the input via JavaScript and not rely on the "number" type.

You should use || (OR) instead of && (AND), and then check for whether the string is empty (node.value == "") or whether it doesn't match the regex:

document.querySelector("input").addEventListener("keyup", function() {
  let node = this;
  if (node.value == "" || !node.value.match(/^\d+$/)) {
    document.querySelector("#valid").innerHTML = "Invalid";
  } else {
    document.querySelector("#valid").innerHTML = "Valid";
  }

});

<input type="text">

<div id="valid"></div>

Now, depending on what you are actually doing with the value of the input field, you could also make it required and add a pattern to it, which would make sure that there is content in it, and that it matches the pattern.

You can check for empty value as well as number type with isNaN(). This will allow you to check for floating numbers too.

document.querySelector("input").addEventListener("keyup", function() {
  let node = this;
  if (node.value == "" || isNaN(node.value)) {
    document.querySelector("#valid").innerHTML = "Invalid";
  } else {
    document.querySelector("#valid").innerHTML = "Valid";
  }

});

<input type="number">
<div id="valid"></div>