How do I make javascript if statement not accept anything besides numeric values

Question

How would integrate text as an argument for my if statement to function?

function ifStatement() {
  var userInput = document.getElementById("userBlank").value;
  if (userInput > 9) {
    return alert("Please enter a correct value");
  } else {
    document.write("you may enter");
  }
}

<form id="form" onsubmit="return false;">
  <input type="button" value="click" onclick="ifStatement();">
  <input id="userBlank" type="text">
</form>

As seen here, I want my if statement to be triggered off of text as well as numbers less than 9. Is it possible to do that?

I tried putting text into the input blank however it did not trigger the if statement.

https://stackoverflow.com/questions/30314447/how-do-you-test-for-nan-in-javascript — deg, Sep 05 '17 at 22:12
What do you mean by "trigger"? You specified an `onclick` to call `ifStatement` for the *button*. — Scott Hunter, Sep 05 '17 at 22:13
have a look at `parseInt()` to see what it does - break the problem down into stages, like 1) is there an input? 2) Is it a number? 3) Is it in range? — Mikkel, Sep 05 '17 at 22:17
Possible duplicate of [Is there a (built-in) way in JavaScript to check if a string is a valid number?](https://stackoverflow.com/questions/175739/is-there-a-built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number) — user247702, Sep 05 '17 at 22:22

score 1 · Answer 1 · answered Sep 05 '17 at 22:19

IIUYC, you can achieve that without JS using number input type:

<input id="userBlank" type="number" min="0" max="9" required>

It won't allow you to enter anything besides digits and input's value will be checked on submit so it's not less than 0 and not greater than 9.

cidicles · Answer 2 · 2017-09-05T22:40:51.200

0

You should check your data types

document.getElementById("userBlank").value

is going to return a string but you want to compare it with a number.

Try to normalize your data contained in 'userInput' first maybe using something like parseInt() so you can compare these two values.

edited Sep 05 '17 at 22:40

answered Sep 05 '17 at 22:17

cidicles

351
2
8

score 0 · Answer 3 · answered Sep 05 '17 at 22:21

Freshly tried:

function ifStatement() {
    var userInput = document.getElementById("userBlank").value;
    if ( (isNaN(userInput)) || ((!isNaN(userInput)) && (userInput > 9)) ) {
        console.log("Please enter a correct value");
    } else {
        console.log("you may enter");
    }
}

score 0 · Answer 4 · answered Sep 06 '17 at 00:16

You can use the pattern attribute to create custom validation. To check whether it's a single digit number, you can use the regular expression \d (short for digit). You can use the title attribute to add a custom tooltip message when validation fails and you can use the required attribute to ensure this field isn't blank. In the end, this looks like:

<form onsubmit="alert('success');return false">
    <input type="text" pattern="\d" required="required" title="A single digit number is required" />
    <input type="submit" />
</form>

score 0 · Answer 5 · answered Sep 06 '17 at 00:29

In Javascript you can test input values by using regex, but as already noted HTML5 does much of this for you; Giving no reason to do it in javascript for on page form testing.

But it is still useful for testing query string data on the URL, localStorage data, or cookie data.

function ifStatement() {
  var userInput = document.getElementById("userBlank").value;
  if (/[0-9]/.test(userInput)) {
    alert("You entered: " + userInput);
  } else {
    alert("Enter a number");
  }
}

Also note, javascript testing on the page does not protect the server from bad user input data. Anyone can simply go into inspect page tools and remove the test and allow bad data to be sent to a server.

How do I make javascript if statement not accept anything besides numeric values

5 Answers5