Email validation using regular expression

Forum Moderators: open

Message Too Old, No Replies

Email validation using regular expression

refhat

7:46 am on May 11, 2010 (gmt 0)

Hello All,
I need to check how a regular expression can be used to validate an email field using javascript, Below is what I have written to do this but seems it has some issues as it does not work for me. can anyone help me in the right direction.

<html>
<head>
<script type="text/javascript">
function checkemail()
 {
  
  if(document.forms[0].elements[0].match(/^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/)) || document.forms[0].elements[0].value == "") 
  {
   alert("Valid email Id is filled out");
    return true;  
   }
  return false;
 }
</script>
</head>
<body>
<form name = "form1" method ="post" action ="#" onsubmit = "return checkemail();">
<p>Email ID
<input type = "text" value =""><br>
<input type ="submit" value = "submit">
</p>
</body>

</body>
</html>

Thanks for the help

TheMadScientist

8:12 am on May 11, 2010 (gmt 0)

Hi refhat,

Welcome to WebmasterWorld!

I always have issues with JS regexes so I've thrown them out for the most part and just make a stinking AJAX request and send them to a much more robust PHP regex I use now, but this one works and I use it some times.

I have no clue what you're doing wrong because almost every time I think a regex should work with JS it doesn't do what I expect and usually breaks my script, and I really don't have time to figure out why, so I actually haven't even looked at your regex much to see if there's something basic you're missing but maybe someone else will explain it. Anyway, enough of the carrying on... Here you go:

var Email='email@yourdomain.com';
var emailFilter=/^[a-zA-Z0-9_.-]+@[a-z0-9][a-z0-9\-]{1,64}(\.[a-z]{2,4}|[a-z]{2,3}\.[a-z]{2})$/i;

var validEmail=emailFilter.test(Email);
if (validEmail!=false) {
alert('We Got a Live One!');
} else {
alert('Oops!');
}

If you have any issues with it, let me know, because I know how to fix this one. LOL :)

refhat

10:50 am on May 11, 2010 (gmt 0)

Thanks a lot TheMadScientist,

I tried running your code but it didn't work. I am not sure may be I have done some mistake as I may fairly new to web technologies.
Anyway I removed my function checkemail() but was not sure how to call the same on submit. thence I decided to keep the function and pasted your code for validation as follows but still it is not working for me. I am somewhere wrong that is for sure.

Please see my below code to check if you can help me as where did I falter:

<html>
<head>
<script type = "text/javascript">
function checkemail() {
var email = 'email@yourdomain.com';
var emailFilter=/^[a-zA-Z0-9_.-]+@[a-z0-9][a-z0-9\-]{1,64}(\.[a-z]{2,4}|[a-z]{2,3}\.[a-z]{2})$/i;
var validEmail=emailFilter.test(Email);
if (validEmail!=false) {
alert('We Got a Live One!');
} else {
alert('Oops!');
} 
}
</script>
</head>
<body>
<form name = "form1" method ="post" action ="#" onsubmit = "return checkemail();">
<p>Email ID
<input type = "text" value =""><br>
<input type ="submit" value = "submit">
</p>
</body>


</html>

Thanks again for your time. Your help is really appreciated.

TheMadScientist

11:12 am on May 11, 2010 (gmt 0)

The first thing is the form wasn't closed...

This should start you off.

When I validate with JS I usually use the function doing the validating to submit the form, but I'll let you figure out how to make it do what you want from here a bit, because it's late where I am (or early depending on your perspective) more than anything else, so I don't feel like thinking of how to tell you to do it, but this should give you a start.

<html>
<head>
<script type = "text/javascript">
function checkemail() {
var email = document.getElementById('email').value;
var emailFilter=/^[a-zA-Z0-9_.-]+@[a-z0-9][a-z0-9\-]{1,64}(\.[a-z]{2,4}|[a-z]{2,3}\.[a-z]{2})$/i;
var validEmail=emailFilter.test(email);
if (validEmail!=false) {
alert('We Got a Live One!\n'+email);
} else {
alert('Oops!\n'+email);
}
}
</script>
</head>

<body>
<form name = "form1" action ="javascript:void();" onsubmit = "checkemail();">
<p>Email ID
<input id="email" type = "text" value =""><br>
<input type ="submit" value = "submit">
</form>
</p>
</body>

</html>

refhat

11:38 am on May 11, 2010 (gmt 0)

Hey Thanks Again, below is my code, I still cant get over it. I tried running the page in chrome but nothing worked but when I tried opening the page in IE I can see that something is wrong with javascript. I got the warning on status bar of IE that(error on page) when I tried to figure out it said Object Expected at line17 char1[line where form attribute is listed]. I tried putting id as "form1", but the error didn't went away. Also the script shows Syntax error in line1 char6.

here is my final code:


<html>
<head>
<script type = "text/javascript">
function checkemail() {
var email = document.getElementById('email').value;
var emailFilter=/^[a-zA-Z0-9_.-]+@[a-z0-9][a-z0-9\-]{1,64}(\.[a-z]{2,4}|[a-z]{2,3}\.[a-z]{2})$/i;
var validEmail=emailFilter.test(email);
if (validEmail!=false) {
alert('We Got a Live One!\n' +email);
} else {
alert('Oops!\n'+email);
} 
}
</script>
</head>
<body>
<form name = "form1" id="form1" action ="javascript:void();" onsubmit = "checkemail();">
<p>Email ID
<input type = "text" value =""><br>
<input type ="submit" value = "submit">
</form>
</p>
</body>


</html> 


I am sure I am missing something really silly.

TheMadScientist

12:22 pm on May 11, 2010 (gmt 0)

I should have told you to try copying and pasting what I posted, but the first problem I see is the document.getElementById('email') has to have an id of email somewhere on the page to get, which in this case I added to your input line:

<input id="email" type = "text" value =""><br>

If that doesn't fix it, try copying and pasting mine and see what happens. I ran it in FireFox before I posted.

refhat

1:58 pm on May 11, 2010 (gmt 0)

Hey thanks Again.

Anyway I have already figured it out through a different way. I am pasting the code below, if this may be of any help to you or any future reader who reaches here like me searching for help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function checkemail()
 {
  
  if(document.forms[0].elements[0].value.match(/^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/) ) 
  {
   alert("Valid email Id is filled out");
    return true;  
   }
if(document.forms[0].elements[0].value == "" ) 
  {
   alert("Please enter an email ID");
    return true;  
   }
if(!document.forms[0].elements[0].value.match(/^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/) ) 
  {
   alert("Valid email Id is Not filled out");
    return true;  
   }
  return false;
 }

</script>
</head>
<body>
<form name="form1" action="#" onsubmit="return checkemail();">
<p>Email ID
<input type="text" value=""><br>
<input type="submit" value="submit">
</p>
</form>
</body>
</html>

I also tried out your code and now it looks great. Thanks for all the help. However in your regular expression I am a little bit confused about numbers {1,64} and then {2,3} and finally {2}.

Moreover I was now trying to valid the email id field using object orientation. I have used the following code to do the same but again it does not work as expected.


<html>
<title>IsEmpty And VAlid Email Field Check</title>
<head>
<script type = "text/javascript">
function formValidator()
  {
   this.isEmailAddress = isEmailAddress;
   this.isEmpty=isEmpty;
  }
  function isEmpty(val) {
    if (val == "")
    {
      return true;
    }
    else 
    {
      return false;
    }
  }
 function isEmailAddress(val) {
  if(val.match(/^([a-zA-Z0-9])+([.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/))
    {
      return true;
    }
    else{
      return false;
    }
  
 }

function checkForm() 
{
 fv = new formValidator();
 if(fv.isEmpty(document.forms[0].elements[0].value))
  {
   fv.raiseError("The field Email ID is Blank") 
   }
 if(!fv.isEmpty(document.forms[0].elements[0].value) && !fv.isEmailAddress(document.forms[0].elements[0].value))
        {
          fv.raiseError("Pleae Enter a Valid email ID");
        }
}
</script>
</head>
<body>
<form>
<p><label>Email address</label>
<input type = "text" value = "">
<input type = "submit" value = "Go" onsubmit = "return checkForm();">
</p>
</form>
</body>
</html>

Thanks for reading my code all over again.