Email Validation | Jquery

Question

I'm trying to create an email validation for my form but i'm lost.

JS:

$(function () {

'use strict';
        // error variables
        var UserError  = true,
            EmailError = true,
            SubError   = true,
            MsgError   = true,
            emailReg = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/,
            email = $(".email").val();


$(".email").blur(function() {

    if($(this).val() === ''){

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;

        alert("1.");

    } 

    else if(emailReg.test(email)){

       $(this).css('border','1px solid #080');
       $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300);

       EmailError = false;

       alert("2");

    }

    else{

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;

        alert("3");
    }
});


 $('.contact-form').submit(function(event) {

     if(EmailError === true){

         event.preventDefault(); // prevent sending 
         $('.email').blur();
     }


});

With this i only get alert 1 (without value) or alert 3 (with value). If i try to type an e-mail, still get alert 3, when this should give me alert 2.

If i try to !emailReg.test(email), i get alert 2.

Please enlighten me!

Thank you in advance.

BR

Related: https://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address — Taplar, Feb 19 '18 at 20:23
But related to your conditional question, `email = $(".email").val();` is set at the start of the logic. It's never updated. — Taplar, Feb 19 '18 at 20:28
What email are you testing it with? Cause there's obvious errors in your regex. — freedomn-m, Feb 19 '18 at 20:28
`/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+)(\.[a-zA-Z0-9]+)+$/g` http://refiddle.com/refiddles/5a8b348575622d0da7370000 — freedomn-m, Feb 19 '18 at 20:33
I don't recommend doing form validation in JavaScript. Since It can be manipulated by the user and still send a potentially dangerous input to your database. — Jojo, Feb 19 '18 at 20:52

score 0 · Accepted Answer · answered Feb 20 '18 at 11:31

Moving my email var into fuction, fix the problem for me,

  $(".email").blur(function() {

    var email = $(".email").val();

    if($(this).val() === ''){

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;


    } 

    else if(emailReg.test(email)){

       $(this).css('border','1px solid #080');
       $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300);

       EmailError = false;


    }

    else{

        $(this).css('border','1px solid #dc2817');
        $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300);

        EmailError = true;


    }
});

Email Validation | Jquery

1 Answers1