JavaScript regex form validation failing

Question

I made this random number guessing game using PHP, and I'm trying to implement client-side form validation using JavaScript. The script should allow only a number from 1-100 and reject everything else like whitespace, alphanumeric characters, negative numbers, and floating point numbers, and/or a mix of these. Here's the script I've got so far:

<script type="text/javascript">
//<![CDATA[

// The checkForm() function makes sure the user's guess is valid
function checkForm() {
    var numericExpression = /[-+]?([0-9]*\.)?[0-9]+/; // Code is from regular-expressions.info
    if (document.getElementById("userGuess").value.match(numericExpression)) {
        return true;
        } // ends the if statement
    else {
        alert("Enter a valid number between 1-100 that isn't negative or a decimal value");
        document.getElementById("userGuess").focus();
        return false;
    } // ends the else statement
}
//]]>
</script>

And here's the form:

<div id="container">
   <h1 id="mainHeading">Let's play a game!</h1>

   <h2 id="subHeading">I'm thinking of a number between 1-100. Take a guess on what you think it is.</h2>

   <!-- User input -->
   <form action="" method="post" onsubmit="return checkForm()" name="formGuess" id="formGuess">
      <input type="text" name="userGuess" id="guessInput" /> 
      <button type="submit" id="submit">You're probably going to get it wrong.</button>
   </form>
</div> <!-- End container div -->

It doesn't work as intended though, and it only rejects pure alphabetic input. Anything else mixed and the script doesn't work. I have the web page uploaded to my personal website: PHP random number game

Thanks!

To check for a number from 1-100 you don't need regex.

elclanrs
– elclanrs

2013-05-09 22:21:21 +00:00
Commented May 9, 2013 at 22:21 — elclanrs
– elclanrs, Commented May 9, 2013 at 22:21

Tamás Pap · Accepted Answer · 2013-05-09 22:23:06Z

2

You don't need regex. To check if a variable is a number use:

var isNumber = (! isNaN(variable));

answered May 9, 2013 at 22:23

Tamás Pap

18.4k15 gold badges73 silver badges106 bronze badges

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

4 Comments

elclanrs Over a year ago

Why the outer parentheses?

iBringDaLULZ Over a year ago

I'm trying to familiarize myself with regular expressions, which is why I was doing it this way. Thank you for the help though!

Tamás Pap Over a year ago

I see. I recommend you this video tutorial series about regex: net.tutsplus.com/tutorials/php/…. This is the place where I actually understood regex for the first time.

iBringDaLULZ Over a year ago

Okie doke, I'll check it out. Thanks c:

asifrc · Accepted Answer · 2013-05-09 22:33:10Z

0

While I agree with the others that you don't really need a regex, in case you wanted to know how the regex should look like for a number (which is really a string since you're using regex) between 1 and 100, here is one way: /^[1-9]$|^[1-9][0-9]$|^100$/

Let me know if that helps or if you have any questions :)

answered May 9, 2013 at 22:33

asifrc

5,8412 gold badges20 silver badges22 bronze badges

3 Comments

RobG Over a year ago

why not allow 007? or " 007 "?

iBringDaLULZ Over a year ago

Oh awesome, thank you so much! I'm trying to make sense of this regex you made right now. So if I understand this correctly, this regex allows for either one digit from 1-9 and nothing else; or two digits, with the first digit being 1-9 and the second 0-9 (effectively allowing 1-99); or simply 100. The ^ and the $ at the beginning and end makes it so that nothing else can come before or after. Is that right? o:

asifrc Over a year ago

@iBringDaLULZ Yep, you nailed it :)

Collectives™ on Stack Overflow

JavaScript regex form validation failing

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related