If I have input[type=number], Chrome allows me to type not just numbers, but also characters like - (minus sign) - for negative numbers. And it seems you can actually type multiple of those - minus signs and dots, e.g.: ".....---888". And when that happens, in on-change event, property of event.target.value would be an empty string (because it's not a valid number). But I would like validation message to appear, telling user has to type an actual number.

So the question is: How do I read the actual value, the one that's being displayed in the input field, because it seems, sometimes it's not the same as event.target.value

I don't know if this matters - this is in a React app

If I have input[type=number], Chrome allows me to type not just numbers, but also characters like - (minus sign) - for negative numbers. And it seems you can actually type multiple of those - minus signs and dots, e.g.: ".....---888". And when that happens, in on-change event, property of event.target.value would be an empty string (because it's not a valid number). But I would like validation message to appear, telling user has to type an actual number.

So the question is: How do I read the actual value, the one that's being displayed in the input field, because it seems, sometimes it's not the same as event.target.value

I don't know if this matters - this is in a React app

• javascript
• html
• reactjs
• events

• you don't, unfortunately. You can however read the validationMessage property to see if it's currently invalid. or read the valueAsNumber property to see if it's NaN. – Kevin B Commented Jun 21, 2017 at 21:41
• Could you not just use a regex to remove all of the extra characters, and just extract the digits? – Obsidian Age Commented Jun 21, 2017 at 21:45
• @ObsidianAge well, no, because you can't get the value if it isn't valid (hence this question) – Kevin B Commented Jun 21, 2017 at 21:46
• @KevinB valueAsNumber I think is my best option. Thanks! – iLemming Commented Jun 21, 2017 at 21:49
• "You can't get the value if it isn't valid" --- Im not sure you understand the suggestion given to you be @kevinB He suggested you use regex to not allow input of invalid characters such as "- (minus sign)" – Paul Okeke Commented Jun 21, 2017 at 21:51

3 Answers 3

You can use the event.target.validity.valid or even better the event.target.validity.badInput property to check if the value is valid.
(although badInput does not seem to be supported by IE)

But i would use the input event instead of the change event, because if the user enters invalid input when starting at an empty <input> element, the change event will not fire since the value is considered empty (due to it being invalid)

Alternatively, you could use the css :invalid selector and use it to show a message that is hidden (requires specific html structure)

input[type="number"] ~ span.message{display:none;}
input[type="number"]:invalid ~ span.message{display:block;}

Use a hidden input that mimics your [type=number] one:

var numberInput = document.querySelector('input[type=number]');
var dolly = document.querySelector('input[hidden]');
numberInput.addEventListener('keyup', (event) => {
  if (event.key !== 'Backspace') {
    dolly.value += event.key;
  } else {
    dolly.value = dolly.value.substr(0, dolly.value.length - 1);
  }
  console.log(dolly.value);
});

<input type="number">
<input hidden>

Obviously, you will need to do more processing for certain keys. This way you get the benefits of the number type and also maintain whatever crazy stuff the user puts in there.

I'm not sure about getting the value, but since you want to set a custom validation message, you can use input setCustomValidity property (see the docs here) and check if an input is valid using the validity.valid property. Here's my implementation.

var myInput = document.getElementById("my-input");

myInput.addEventListener("keyup", function (event) {
  if (!myInput.validity.valid) {
    myInput.setCustomValidity("I expect a valid number, darling!");
  } else {
    myInput.setCustomValidity("");
  }
});

<form>
  <label>Please provide me a number</label>
  <input type="number" id="my-input" name="my-input">
  <button>Submit</button>
</form>