jQuery Regular Expression Checking User Input for Numbers

Question

I'm trying to have it so when a user enters a string in the txtNmr field, they get an output saying enter a number. Currently, what I have isn't working correctly, and I can't get anything to print out. I know there are other ways in doing, but I want to use a regular expression.

    function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    
    found_position = txtNmr.search(/\d/);
    if (found_position = -1){
      $("#errors").append("Enter a number not a string");
      $("#errors").css("background-color", "yellow");
    }
    
if (nr > 0 && nr < 21) {
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $("#greetings").append("Hello, " + name + "<br />");
    }
  } else {
    $("#errors").append("Please Enter A Number Between 1 and 20");
    $("#errors").css("background-color", "yellow");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

Answer 1

You should use String.prototype.match to check if a string matches a regular expression.

String.prototype.search finds the index of the match within a String which is not a good indicator of whether or not the String actually matches the regular expression.

To match only whole numbers, you should use the regular expression /^\d+$/

Also, you should put an if/else around the first condition that the input should be numeric. Otherwise, it will still print the greeting after the error message that the input should be a number.

 function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    
    var found = nr.match(/^\d+$/);
    if (!found){
      $("#errors").append("Enter a whole number, not a string or a decimal");
      $("#errors").css("background-color", "yellow");
    } else {
      if (nr > 0 && nr < 21) {
       for (var counter = 0; counter < nr; counter = counter + 1) {
          $("#greetings").append("Hello, " + name + "<br />");
       }
    } else {
      $("#errors").append("Please Enter A Number Between 1 and 20");
      $("#errors").css("background-color", "yellow");
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

Without Regex, you convert the string to a number and then round it down and then check if the rounded number converted to a string is equal to the original string and that the number is larger than or equal to 0.

function isPositiveInteger(str) {
    var n = Math.floor(+str);
    return n !== Infinity && String(n) === str && n >= 0;
}

 function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    if (!isPositiveInteger(nr)){
      $("#errors").append("Enter a whole number, not a string or a decimal");
      $("#errors").css("background-color", "yellow");
    } else {
      if (nr > 0 && nr < 21) {
       for (var counter = 0; counter < nr; counter = counter + 1) {
          $("#greetings").append("Hello, " + name + "<br />");
       }
    } else {
      $("#errors").append("Please Enter A Number Between 1 and 20");
      $("#errors").css("background-color", "yellow");
    }
  }
}
function isPositiveInteger(str) {
    var n = Math.floor(+str);
    return n !== Infinity && String(n) === str && n >= 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

Answer 2

/^\d$/ means '0' or '1' or '2' or '3' or '4' or '5' or '6' or '7' or '8' or '9'. Any string different than this would be rejected, so '10' for example is rejected.

To add the remaining numbers 10 thorough 20, you can change the reg exp to: /^\d{1,2}$/, which means any string composed by one to two digits, so the following is valid: '01', '2', '15', '84'...

Note that I added the ^ which means that the string must start with, and $ which means the string must end with.

Also I think there is a mistake in your code, it should be:

found_position = nr.search(/\d/);

Instead of:

found_position = txtNmr.search(/\d/);

So with the correct reg exp:

found_position = nr.search(/^\d{1,2}$/);

Another mistake, the test condition isn't correct:

if (found_position = -1)

Should be:

if (found_position == -1)

Note the double ==

Answer 3

You are just testing if the string starts with a number, you need to check if its all numbers.

Regex explained: https://regexr.com/42t4f

    function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    
    if (/^\d+$/.test(nr) === false){
      $("#errors").append("Enter a number not a string");
      $("#errors").css("background-color", "yellow");
    }
    
if (nr > 0 && nr < 21) {
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $("#greetings").append("Hello, " + name + "<br />");
    }
  } else {
    $("#errors").append("Please Enter A Number Between 1 and 20");
    $("#errors").css("background-color", "yellow");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>