Javascript: Email Validation

Question

I am having trouble with my email validation code using function validateEmail (str). Any suggestions?

//validates email address form
function validateEmail (str)
    {
    var retVal;
    var atpos=retVal.indexOf("@");
    var dotpos=retVal.lastIndexOf(".");
    if (atpos<1 || dotpos<atpost+2 || dotpos+2>=retVal.length)
    {
    retVal = false;         
    return retVal;
    }

and calling it with `function doSubmit() var theEmail = document.PizzaForm.email.value; if (validateEmail(theEmail)) {alert("The email format is ok!") ; }else { alert("Invalid email format!" +"\n\nThe Email address must be in one of the following formats:" +"\n\ta@a\t – valid" +"\n\t.@.\t – valid" +"\n\ta@@@@@@@@a\t – valid" +"\n\t\/*..@;;;fred\t – valid" +"\n\t@cccc@\t – invalid, the @ character is in the first and last positions");}` — user3625451, May 11 '14 at 12:29
The actual error in your code is `atpost` is typo'd. See my answer for how you *should* do this, though. — Niet the Dark Absol, May 11 '14 at 12:30
*What* trouble do you have? Also, please post the complete function not only its beginning. — Bergi, May 11 '14 at 12:31
You realize it's perfectly valid for the right side of the @ sign to have an IP address, right? — Snowburnt, May 11 '14 at 12:32
you don't have the same number of `}`s as `{`s in what you've pasted, nor do you default `retVal` to `true` anywhere/`return` in case did not enter the `if` — Paul S., May 11 '14 at 13:10
@user3625451 You do realize you can [edit](http://stackoverflow.com/posts/23592604/edit) your question instead of adding important stuff in the comments? Please go to the help center to learn how this site work. We are **NOT** a forum! — rene, May 11 '14 at 14:49

Niet the Dark Absol · Answer 1 · 2014-05-11T12:47:44.890

4

Any suggestions? Yes. Don't.

<input type="email" />

Problem solved!

It should be noted that use of HTML5 features will make for a beautiful web... provided the browser supports it. The reason being, a failed validation will cause the browser to notify the user of the error in a non-intrusive and consistent, native manner.

Older browsers will not be able to validate in this way, however due to the specification stating that unrecognised type values should default to text, HTML5 is fully backwards compatible, way back into IE5.5 and almost certainly even earlier - maybe even IE1!

This lack of validation is not an issue. Validation should always be handled server-side, regardless of what validation you have on the client-side. As an example, in PHP, you would pass it through filter_var with the FILTER_VALIDATE_EMAIL filter.

edited May 11 '14 at 12:47

answered May 11 '14 at 12:29

Niet the Dark Absol

320,036
81
464
592

3

This will not work in older browsers (mostly Internet Explorer < 10) or safari. – Sebb May 11 '14 at 12:31
3

@Sebb So? People who insist on disabling Windows Update should be punished with a less beautiful web, in my opinion. – Niet the Dark Absol May 11 '14 at 12:32
1

You reminded me about [this](http://2.bp.blogspot.com/-PEAMgnO_c7c/UDiplYKPk3I/AAAAAAAAADg/FJXNlXnN2X8/s1600/PROBLEM_SOLVED.jpg) ))) – nicael May 11 '14 at 12:33
3

@NiettheDarkAbsol yep, but if you're a commercial programmer there's no way you lock out many customers just because you think their IT admin should enable win update. – Sebb May 11 '14 at 12:33
3

So maybe the OP is writing something for a corporate who is running IE8 or IE9. – Evan Trimboli May 11 '14 at 12:33
@Sebb Please explain how "not having instant validation of your email address" constitutes "locking out many customers". So you have to submit the form and have the server complain at you for typing it wrong. Ooh, how "90's". Fits with your browser, doesn't it? – Niet the Dark Absol May 11 '14 at 12:36
3

@NiettheDarkAbsol The problem isn't the browser site validation but using a html5 element which isn't supported in the browser which most companies still use. I'm not happy about it either but you can't lock out commercial customers just because you think diffrently than their admin/boss. – Sebb May 11 '14 at 12:39
@Sebb Erm... "not supported". Right. So I guess the "if `type` is not recognised, the user agent will fall back to `type=text`" part of the specification of HTML3.2, which is the whole reason HTML5 is backwards compatible, is completely lost then? – Niet the Dark Absol May 11 '14 at 12:44
1

@NiettheDarkAbsol Yep, but with this fallback we're back in the "90's" as mentioned above. Using Javascript will grant a good experience to all users, including those who are still forced to use IE. – Sebb May 11 '14 at 12:46
@Sebb I have edited my answer to elaborate further on browser compatibility. You would mind taking a look and letting me know what you think of said edit? – Niet the Dark Absol May 11 '14 at 12:48
1

@NiettheDarkAbsol I also didn't mean to remove server side validation; client side is just a better user experience. But thanks for editing. – Sebb May 11 '14 at 12:49

score 1 · Answer 2 · answered May 11 '14 at 12:43

1

The Problem of your code is that you create an empty variable (var retVal) and then you check this variable instead of the given string:

var retVal;
var atpos=retVal.indexOf("@");
var dotpos=retVal.lastIndexOf(".");

The correct code is

function validateEmail (str)
{
  var retVal;
  var atpos=str.indexOf("@");
  var dotpos=str.lastIndexOf(".");
  if (atpos<1 || dotpos<atpost+2 || dotpos+2>=str.length)
  {
    retVal = false;         
    return retVal;
  }
  // further code
}

answered May 11 '14 at 12:43

Sebb

871
6
16

I'm confused, what is the difference between the "correct code" and my original code? also I called retVal in a previous segment `function validateText() { var retVal = true; if (0 == document.PizzaForm.email.value.length){validationMessages += "\nEmail field is missing."; retVal = false;} return retVal;}` – user3625451 May 11 '14 at 13:00
The function has one parameter - `str` - which probably contains the string to check. In your original code, you create a new ***empy*** var called `retVal` and you check ***this*** variable for being an email, which is obviously failing. – Sebb May 11 '14 at 13:02

Javascript: Email Validation

2 Answers2