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>

To check if a string matches a regular expression, you can use txtNmr.match(/\d/) or you can use /\d/.test(txtNmr) (which will return true/false depending on if the string matches regex) — jacob.mccrumb
– jacob.mccrumb, Commented Nov 11, 2018 at 20:24

Jubei · Accepted Answer · 2018-11-11 23:37:47Z

1

/^\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 ==

edited Nov 11, 2018 at 23:37

answered Nov 11, 2018 at 20:26

Jubei

1,2401 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjaco · Accepted Answer · 2018-11-11 20:29:15Z

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>

Unmitigated · Accepted Answer · 2018-11-12 02:39:27Z

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>

Collectives™ on Stack Overflow

jQuery Regular Expression Checking User Input for Numbers

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related