Javascript Regular Expressions Email Address

Question

So I have a homework assignment that I have completed. But I can not get the email address to test correctly. From what I can tell everything is correct.

<!DOCTYPE html>
<html>
<head>
<title>Lab 5, Part 3</title>
<script>
function validate()
{
var email = document.forms["form1"]["email"].value;
var emailValidator = "/^\w+([\.-]?\w+)+@\w+([\.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/";

if (!email.match(emailValidator))
{
 alert("Not a valid Email Address");
 return false;
}
}
</script>
</head>
<body>
<h1 style="text-align:center">Lab 5, Part 3 for </h1>
<h2 style="text-align:center">IT 3203</h2>

<form name="form1" action="http://weblab.kennesaw.edu/formtest.php" onsubmit="return validate();" method="get">
<p> Email: <input type="text" id="email" name="email"></p>
     <input type="Submit" value="Submit">
</form>

<p><a href=index.html>Back to Main Page</a></p>


</body>
</html>

Solution here: https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript — nilobarp, Oct 20 '17 at 02:58
*"From what I can tell everything is correct."* If it was then it would work, wouldn't it? :) So no, it's not. You somehow mixed the syntax of string literals and regex literals. Learn about regular expressions here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions . — Felix Kling, Oct 20 '17 at 03:01
Your regular expression should test for exactly this: One or more word characters Exactly one at-sign One or more word characters Exactly one period Two or more characters that are a-z, A-Z, 0-9, period, or hyphen (One way to get "two or more" is to look for one such character and then look for one or more. Don't forget about character classes.) This is the question presented — lainalex, Oct 20 '17 at 03:33
I think it was my "" around the syntax var emailValidator = "/^\w+([\.-]?\w+)+@\w+([\.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/"; should be var emailValidator = /^\w+([\.-]?\w+)+@\w+([\.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/; — lainalex, Oct 20 '17 at 03:35

score 3 · Accepted Answer · answered Oct 20 '17 at 03:10

The problem is that you some mixed string literal and regex literal notations:

"/^\w+([\.-]?\w+)+@\w+([\.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/"

"..." denotes a string literal, /.../ denotes a regex literal. While you can pass a string literal to String#match, the whole content of the string will be interpreted as the regex pattern. That means, given the above string, your code will only match of the test string literally contains /^...., which it doesn't.

Either use a string literal without the regex delimiters and escape all backslashes:

"^\\w+([\\.-]?\\w+)+@\\w+([\\.:]?\w+)+(\\.[a-zA-Z0-9]{2,3})+$"

or use a regex literal (preferable):

/^\w+([\.-]?\w+)+@\w+([\.:]?\w+)+(\.[a-zA-Z0-9]{2,3})+$/

Have a look at MDN to learn more about regular expression.

A correction, it should be "^\\w+([\\.-]?\\w+)+@\\w+([\\.:]?\\w+)+(\\.[a-zA-Z0-9]{2,3})+$" not "^\\w+([\\.-]?\\w+)+@\\w+([\\.:]?\w+)+(\\.[a-zA-Z0-9]{2,3})+$" (a slash is missed) — user467801, Feb 01 '21 at 13:43

score 0 · Answer 2 · answered Oct 20 '17 at 03:03

your code with correct regex var emailValidator = /^\w+[\w-+.]\@\w+([-.]\w+).[a-zA-Z]{2,}$/;

<!DOCTYPE html>
<html>
<head>
<title>Lab 5, Part 3</title>
<script>
function validate()
{
var email = document.forms["form1"]["email"].value;
var emailValidator = /^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/;;

if (!email.match(emailValidator))
{
    alert("Not a valid Email Address");
    return false;
}
}
</script>
</head>
<body>
<h1 style="text-align:center">Lab 5, Part 3 for </h1>
<h2 style="text-align:center">IT 3203</h2>

<form name="form1" action="http://weblab.kennesaw.edu/formtest.php" onsubmit="return validate();" method="get">
<p> Email: <input type="text" id="email" name="email"></p>
           <input type="Submit" value="Submit">
</form>

<p><a href=index.html>Back to Main Page</a></p>


</body>
</html>

score 0 · Answer 3 · answered Oct 20 '17 at 03:07

Change your Email validator rules,

function validate()
{
    var email = document.forms["form1"]["email"].value;

    var emailValidator = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!email.match(emailValidator))
    {
        alert("Not a valid Email Address");
        return false;
    }else{
        alert("Correct Email Address");
        return true;
    }
}

Your Email Validator rule was not in well formed. Give the valid regular expression rules.

<!DOCTYPE html>
<html>
<head>
 <title>Lab 5, Part 3</title>
 <script>
 function validate()
 {
  var email = document.forms["form1"]["email"].value;
  var emailValidator = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  if (!email.match(emailValidator))
  {
   alert("Not a valid Email Address");
   return false;
  }else{
   alert("This is a Valid Email Address");
   return true;
  }
 }
 </script>
</head>
<body>
 <h1 style="text-align:center">Lab 5, Part 3 for </h1>
 <h2 style="text-align:center">IT 3203</h2>

 <form name="form1" action="http://weblab.kennesaw.edu/formtest.php" onsubmit="return validate();" method="get">
  <p> Email: <input type="text" id="email" name="email"></p>
  <input type="Submit" value="Submit">
 </form>

 <p><a href=index.html>Back to Main Page</a></p>


</body>
</html>

Javascript Regular Expressions Email Address

3 Answers3