Email validation Jquery not working

Question

I have been working on a simple email validation. But it doesn't work.

Any ideas why it isn't working? Am I doing something wrong or should I structure my code in some other way?

I have done a function like this:

function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if(!regex.test(email)) {
        return false;
    } else {
        return true;
    }
}

and after that I'm calling that function in my setupRegistration function.

My JS looks like this:

function doOutputMessage(type, message){
    $("#outputMessage").html("");
    $("#outputMessage").removeClass();
    $("#outputMessage").hide();
    if(type == "error") {
        $("#outputMessage").addClass("error").fadeIn("fast");
    } else if(type == "success") {
        $("#outputMessage").addClass("success").fadeIn("fast");
    }

    $("#outputMessage").text(message);
    $("#outputMessage").show();
}

function setupRegistration(){

    $("#signupWrapper").on("click", "#regUser", function(){
        var username = $("input[name='username']").val();
        var email = $("input[type='email']").val();
        var password = $("input[type='password']").val();

        if(username == ""){
            doOutputMessage("error", "Fill in your desired username!");
        }

        if(email == ""){
            doOutputMessage("error", "Fill in your email!");
        }

        if(IsEmail(email)==false){
            doOutputMessage("error", "mailen är fel förfan");
        }

        if(password == ""){
            doOutputMessage("error", "Fill in your desired password!");
        }

        if(username != "" && email != "" && password != ""){
            ajaxCall(username, email, password);
        }   
    });
}

function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if(!regex.test(email)) {
       return false;
    }else{
       return true;
    }
}


function ajaxCall(username, email, password){
    $.ajax({
        type: 'POST',
        url: '../register.php',
        data:   {
            'username' : username,
            'email' : email,
            'password' : password,
        },
        success: function(data) {
            if(data.exists){
                doOutputMessage("error","That Username is allready taken.");
            } else if(data.inserted) {
               doOutputMessage("success","You have successfully been registered!");
            }else {
                doOutputMessage("error","Something went wrong, try again later.");
            }
        }
    });
}

$(document).ready(function(){
    setupRegistration();
});


function regSubmit(){

    clearErrorMessages();

    var username = $("#regForm #username").val();
    var email = $("#regForm #email").val();
    var password = $("#regForm #password").val();

    if(username == ""){
        showValidationMessage("#regForm #error_username", "Fill in your desired username!");
    }

    if(email == ""){
        showValidationMessage("#regForm #error_email", "Fill in your email!");
    }

    if(password == ""){
        showValidationMessage("#regForm #error_password", "Fill in your desired password!");
    }

    if(username != "" && email != "" && password != ""){
        $.ajax({
            url:    'regLogin.code.php',
            type:   'POST',
            data:   {
                    'action'    :   'register',
                    'username'  :   username,
                    'email'     :   email,
                    'password'  :   password
                    },
            success: function(data, status){
                console.log(data);
                if(data == "exist"){
                    showValidationMessage("#regForm  #error_general", "A user with that username or password already exists!");
                }else if(data == "illegal"){
                    showValidationMessage("#regForm  #error_general", "Your username contains illegal characters!");
                }
                else if(data == "true"){
                    showValidationMessage("#regForm  #success", "Success!");
                    setTimeout(function(){
                        window.location.replace("/admin/inside/");
                    }, 1000);
                }
            },
            error: function(xhr, desc, err){
                showValidationMessage("#regForm  #error_general", "Something went wrong, please try again");
            }
        });
    }
}

Just try using `if(!IsEmail(email)){` instead of `if(IsEmail(email)==false){` — Guruprasad J Rao, Oct 28 '15 at 09:22
shouldendt the regex be something like : /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/ — Ivan Sander de Jong, Oct 28 '15 at 09:23
@DavidSkx yes everything else works. YOu can check it out here: regform.jonasalvarson.se — Jonas Alvarson, Oct 28 '15 at 09:25
Even if isEmail is false, it'll show the error, but it doesn't stop the Ajax call: if(username != "" && email != "" && password != ""){ ajaxCall(username, email, password); } — Mario Chueca, Oct 28 '15 at 09:27
Just a side note: you can chain jQuery-methods which is much more performant: `$("#outputMessage").html("").removeClass('myclass').hide();`. Also you should store jQuery-selectors in a variable ( `var outputMessage = $("#outputMessage")` ) and then use this whenever you need it in your script. — misantronic, Oct 28 '15 at 09:29

score 1 · Accepted Answer · edited May 23 '17 at 12:29

@Mario-Chueca is right. Your code is mostly working correctly, however, you are making an Ajax call regardless if the email is correct and as a result the error message is not shown. You should only make the ajax call when the specified email is valid:

if(username != "" && email != "" && password != "" && IsEmail(email)){
    ajaxCall(username, email, password);
}

I have included a code sample below to show that your email validation (without Ajax call) is working. I have included the if(!IsEmail(email){ fix suggested by @Abdulla and I also also added a more complex regular expression from this post.

function IsEmail(email) {
  //var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  //More advanced regex to valid 99.99% of most emails in use, see https://stackoverflow.com/questions/46155/validate-email-address-in-javascript
  var regex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
  if (!regex.test(email)) {
    return false;
  } else {
    return true;
  }
}

function doOutputMessage(type, message) {  
  $("#outputMessage").html("");
  $("#outputMessage").removeClass();
  $("#outputMessage").hide();
  if (type == "error") {
    $("#outputMessage").addClass("error").fadeIn("fast");
  } else if (type == "success") {
    $("#outputMessage").addClass("success").fadeIn("fast");
  }

  $("#outputMessage").text(message);
  $("#outputMessage").show();
}


//if (IsEmail('john.doe@stackoverflow.com')) {

//  doOutputMessage('success', 'valid email')
//}



if (!IsEmail('john.doe#stackoverflow.com')) {

  doOutputMessage('error', 'invalid email')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outputMessage">Test</div>

This worked. Added && IsEmail(email) so the ajaxCall werent made even if the mail was wrong. Thanks for the help everyone. Im pretty new to jquery, but im learning everyday. The hard part is too structure the code in a goodway. It feels like im just putting my code randomly and dont have any structure. But maybe i will learn to do this as i code? — Jonas Alvarson, Oct 28 '15 at 10:09

Mario Chueca · Answer 2 · 2015-10-28T10:00:28.037

1

Use some of the advices from before, but change this too, the error doesn't stop the ajax call:

var error_email=false;
if(!IsEmail(email)){
    error_email=true;
    doOutputMessage("error", "mailen är fel förfan");
}

if(password == ""){
    doOutputMessage("error", "Fill in your desired password!");
}

if(username != "" && email != "" && password != "" && !error_email){
    ajaxCall(username, email, password);
}

edited Oct 28 '15 at 10:00

answered Oct 28 '15 at 09:45

Mario Chueca

116
7

1

yeah ofc.. the ajaxcall were done anyways, fixed that. Now its working. THX! – Jonas Alvarson Oct 28 '15 at 10:03

Abdulla Nilam · Answer 3 · 2015-10-28T09:29:37.867

0

remove false in here

if(!IsEmail(email){

and regex should be

regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

Live DEMO

How to Find or Validate an Email Address

edited Oct 28 '15 at 09:29

answered Oct 28 '15 at 09:24

Abdulla Nilam

36,589
17
64
85

and i tested your link there is error in login form validation. fix that too – Abdulla Nilam Oct 28 '15 at 09:28
Ive tested your solution, but it dosent seem to work. Am i missing something here.. Live Demo: http://regform.jonasalvarson.se/ (make a hard refresh, made some changes in the code) – Jonas Alvarson Oct 28 '15 at 09:37
try with this `if(IsEmail(email)==false){` – Abdulla Nilam Oct 28 '15 at 09:45
the error doesn't stop the ajax call. But i think @Mario Chueca have the solution :)? – Jonas Alvarson Oct 28 '15 at 09:49

score 0 · Answer 4 · answered Oct 28 '15 at 09:49

0

please try:

function IsEmail(email){
    var reg = /^[a-zA-Z0-9\.\-\+]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/
    return reg.test(email)
}

answered Oct 28 '15 at 09:49

YonF

641
5
20

Email validation Jquery not working

4 Answers4