CODEWITHSUNDEEP
javascriptjqueryregex
mttetc
mttetc

Reputation: 745

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

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 [email protected])

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 !

Upvotes: 0

Views: 92

Answers (2)

brso05
brso05

Reputation: 13222

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("[email protected]"));
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("[email protected]"));
	</script>
</body>
</html>

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

Upvotes: 1

Daniel Cheung
Daniel Cheung

Reputation: 4819

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>

Upvotes: 2

Related Questions