My jquery Regex won't work (e mail adress validation)

Question

I've tried a lot of things but I can't seem to make it work Problem is whatever I type is considered false, even when I try valid email adress (such as ok@gmail.com)

Here's my code

function validateEmail(email) {
        var re = /[^\s@]+@[^\s@]+\.[^\s@]+/;
        return re.test(email);
    }

 var email = $('input[name = pEmail]').val();  
 
 $('#nPopupSubmit').click(function () {
         if (!validateEmail(email)) {
             $('label[id = pEmailError]').show();
             $('input[name = pEmail]').focus();  
             return false; 
              } else {
                whatever
              });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form id="popup1" method="post">
            <fieldset>    
                <input id="pEmail" type="text" placeholder="E-mail" value="E-mail" onclick="this.value=''" class="popup_input" name="pEmail" type="text" /> 
                <label id="pEmailError" style="color:#FF0000; display:none;">Error</label>
                <button type="submit" id="nPopupSubmit" name="nPopupSubmit">Go !</button>          
            </fieldset>
        </form>

Do any of you have a clue on what's going on ? Thank you !

Please do not just straight downvote this question. Everybody learn from a point. Please, everyone needs to learn to walk before running. — Daniel Cheung, Aug 12 '15 at 16:17
@Hisat I just posted an answer that I think will solve your problem. Let me know if you have any questions... — brso05, Aug 12 '15 at 17:13
Validating email with regex is generally a bad idea: [this](http://davidcel.is/posts/stop-validating-email-addresses-with-regex/), [this](http://stackoverflow.com/questions/46155/validate-email-address-in-javascript) and [this](http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address). — Terry, Aug 12 '15 at 17:20
validating email address on the client side is a futile exercise. It will be a trivial matter for an attacker to bypass it — e4c5, Aug 13 '15 at 07:21
I just want to avoid errors or being spammed, it's still something ! — mttetc, Aug 13 '15 at 07:53

Daniel Cheung · Answer 1 · 2015-08-12T16:19:23.080

2

Your function doesn't contain error, perhaps your jQuery? Your email variable should be defined after the click, otherwise, email's value would always = "Email" (the default value)

$('#nPopupSubmit').click(function () {
    var email = $('#pEmail').val();  //<-- This is where you should put this
    if (!validateEmail(email)) {
        $('#pEmailError').show();
        $('#pEmail').focus();  
        return false; 
    } else {
        //whatever
    }
});

Also, you can simplify your code by using the ids you have already given your elements :)

function validateEmail(email) {
  var re = /[^\s@]+@[^\s@]+\.[^\s@]+/;
  return re.test(email);
}
 
$('#nPopupSubmit').click(function () {
  var email = $('#pEmail').val();  
  if (validateEmail(email) !== true) {
    $('#pEmailError').show();
    $('#pEmail').focus();  
    return false; 
  } else {
    //whatever
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="popup1" method="post">
  <fieldset>    
    <input id="pEmail" type="text" placeholder="E-mail" value="E-mail" onclick="this.value=''" class="popup_input" name="pEmail" type="text" /> 
    <label id="pEmailError" style="color:#FF0000; display:none;">Error</label>
    <button type="submit" id="nPopupSubmit" name="nPopupSubmit">Go !</button>          
  </fieldset>
</form>

edited Aug 12 '15 at 16:19

answered Aug 12 '15 at 15:59

Daniel Cheung

4,779
1
30
63

1

@AndrewMairose I don't understand. I don't copy other's answers, I'm afraid it is some kind of misunderstanding. I'm really not lying :( – Daniel Cheung Aug 12 '15 at 16:05
@AndrewMairose actually, his original answer was posted before yours and was correct originally. – d0nut Aug 12 '15 at 16:11
@AndrewMairose After your first comment, I did go and refresh the page and saw the exact correction. But I thought the error was due to the selector as I was not familiar with `$("[attr = value]")`, I thought the correct one should be `$("[attr='value']")` and that the missing `}` was a posting mistake – Daniel Cheung Aug 12 '15 at 16:13
@AndrewMairose If you don't believe me, edit my answer and see my revisions. I did not straight "copy" OP's code – Daniel Cheung Aug 12 '15 at 16:14
@AndrewMairose this was the original answer he provided multiple minutes before you http://stackoverflow.com/revisions/31970199/1 – d0nut Aug 12 '15 at 16:15
Here's a jsfiddle to be more accurate https://jsfiddle.net/mxbvwewg/1/ Something is preventing it from running, i must have forgottent something in here... – mttetc Aug 12 '15 at 16:17
1

@Hisat here you go https://jsfiddle.net/mxbvwewg/2/ another change i made was moving the assignment to the email variable to inside the click function. – d0nut Aug 12 '15 at 16:19
@Hisat If this helps, please accept it as answer :) – Daniel Cheung Aug 12 '15 at 16:24
Alright, I could've sworn it didn't have it in there at first. Let's delete all those comments, as they detract from this answer. – Andrew Mairose Aug 12 '15 at 17:04

brso05 · Accepted Answer · 2015-08-12T17:18:08.867

1

Your current regex won't validate how you want.

You can try this:

function validateEmail(email) {
    var re = new RegExp("^[^\\s@]+@[^\\s@]+?\\.[^\\s@]+$", "m");
    console.log(email.match(re));
 if(email.match(re))
 {
     return true;
    }
 else
 {
  return false;
 }
}

window.alert(validateEmail("a@b.c"));
window.alert(validateEmail("a @b.c"));

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <script>
 function validateEmail(email) {
        var re = new RegExp("^[^\\s@]+@[^\\s@]+?\\.[^\\s@]+$", "m");
  console.log(email.match(re));
  if(email.match(re))
  {
      return true;
  }
  else
  {
      return false;
  }
    }
 console.log(validateEmail("a@b.c"));
 </script>
</body>
</html>

Hope that helps. If you have any questions on specifics just let me know...

edited Aug 12 '15 at 17:18

answered Aug 12 '15 at 17:12

brso05

13,142
2
21
40

Thank you ! It seems to be working. I guess using regEx is bad in the first place for e-mail adress validation. Is it too restrictive ? – mttetc Aug 13 '15 at 07:20
@Hisato it's not bad it will atleast prevent users from entering an incorrect email by accident...You were on the right track with your original regex but it just needed a little tweaking. – brso05 Aug 13 '15 at 12:51

My jquery Regex won't work (e mail adress validation)

2 Answers2