Creating a regular expression in javascript

Question

I'm trying to do a form validation where we check if the input the user enters matches a regular expression, than the form should go through. For now I'm trying to validate the name field so that even if the users enters a minimum of 2-15 characters spaces can be included. Shouldn't it be /^\w\s{2,15}$/;

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Bottles Form</title>
      <link rel="stylesheet" type="text/css" href="./css/form.css">
      <script type="text/javascript">

         function validFirstName() {
            var fName = document.getElementById("customerName").value;
            var regex = /^\w{2,15}$/;
            if (regex.test(fName)) {
               document.getElementById("firstNameAlert").innerHTML = "<span class='valid'>Valid</span>";
               return (true);
            } else {
               document.getElementById("firstNameAlert").innerHTML = "<span class='error'>Error. First Name must be within 2 to 15 characters</span>";
              return (false);
            }
         }

         function formCalculator() {
            const SALESTAX = .0825;
            var userName = document.getElementById("customerName").value;
            var quantity = document.getElementById("quantityBottle").value;
            var costBottle = document.getElementById("costBottle").value;
            var totalBottle = quantity * costBottle;
            var discount = 0;
            var discountedTotal = 0;
            var taxTotal = totalBottle * SALESTAX;
            var orderTotal = totalBottle + taxTotal;
            //var orderWithDiscount = discountedTotal + taxTotal;

           if(parseInt(quantity) > 10 && parseInt(quantity) <= 19) {
              discount = .10;
              totalBottle = totalBottle - (totalBottle * discount);
           }
           orderTotal.value = "$" + orderTotal.toFixed(2);
           document.getElementById("result").innerHTML = "Hello " + userName + " - Your order of " + quantity + " bottles, costs $" + orderTotal.toFixed(2) + ", plus tax.";
        }

     </script>
  </head>
  <body>
     <h1>Bottles Form</h1>
     <form action="" method="post" enctype="multipart/form-data" name="wigetCalc">
        <input name="customerName" id="customerName" type="text" size="20"  onblur="validFirstName();"/>&nbsp;-&nbsp;<span id="firstNameAlert">First Name</span><br />
        <input name="quantityBottle" id="quantityBottle" type="text" value="0" size="20" maxlength="3" />&nbsp;Bottle Order Quantity<br />
        <input name="costBottle" id="costBottle" type="text" value="5.31" size="20" readonly="readonly" />&nbsp;Bottle Cost<br />
        <p class ="coloredBox" onclick="formCalculator();">Submit</span></p>
        <div id="result"></div>
     </form>
   </body>
</html>

Christian · Accepted Answer · 2015-11-15 03:55:51Z

2

Quantifiers match the preceding token, which is a space in your current regex. So your regex matches one letter followed by 2-15 spaces. You want to use a character set to match any combination of letters and spaces (square brackets).

/^[\w\s]{2,15}$/

See: http://www.regular-expressions.info/charclass.html

edited Nov 15, 2015 at 3:55

answered Nov 15, 2015 at 3:38

Christian

19.8k3 gold badges57 silver badges70 bronze badges

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

3 Comments

Domino Over a year ago

PS: I'd also allow hyphens and apostrophes, since it's a person's name.

elixenide Over a year ago

Good answer, but actually, the preceding token is just the space, not the letter and the space.

Christian Over a year ago

@EdCottrell Yes, you are correct, and my answer was poorly worded. Edited.

jrkt · Accepted Answer · 2015-11-15 03:39:44Z

0

Why not just use length?

var fName = document.getElementById("customerName").value;
if (fName.length >= 2 && fName.length <= 15) {
    document.getElementById("firstNameAlert").innerHTML = "<span class='valid'>Valid</span>";
} else {
    document.getElementById("firstNameAlert").innerHTML = "<span class='error'>Error. First Name must be within 2 to 15 characters</span>";
}

answered Nov 15, 2015 at 3:39

jrkt

2,7857 gold badges35 silver badges55 bronze badges

2 Comments

Domino Over a year ago

That would allow someone to write special characters and perhaps even code which might get executed if you aren't careful. It's a great security issue. Accepting only word characters and a few symbols (such as apostrophes and hyphens) is a better idea. (though for it to actually be safe, the regex must also be checked server-side)

jrkt Over a year ago

True, if you don't do anything else to validate the input. The regex should be: /^[\w\s]{2,15}$/ you were missing the square brackets.

Collectives™ on Stack Overflow

Creating a regular expression in javascript

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related