CODEWITHSUNDEEP
jqueryregex
Bob
Bob

Reputation: 49

JQuery Validation Email Regex not working

I am trying to build a validation system in JQuery without using any plugins

My JQuery code is as such, I have a validation function for each input, e.g.:

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  alert("email is "+regex.test(email));
  return regex.test(email);
}

You will notice I have an alert in this one, because the email is not validating properly despite the regex being borrowed from a highly-reputed answer -> Email validation using jQuery

I tested it with several valid emails to no avail. Valid emails taken from here -> http://en.wikipedia.org/wiki/Email_address#Valid_email_addresses. I changed the regex to just /\S+/ and everything else worked properly so I know that the problem lies within the regex.

Anyways, why does this regex not evaluate to true? My understanding is:

/^([a-zA-Z0-9_\.\-\+])+

Begins with any character a-z, A-Z, 0-9, ., -, or +. One or more times

\@

Followed by the "@" symbol

(([a-zA-Z0-9\-])+\.)+

followed by one or more of one or more characters a-z,A-Z,0-9, or -, then a period "."

([a-zA-Z0-9]{2,4})+$

Ending with one or more of two, three, or four characters a-z,A-Z,0-9

EDIT

I have some news, so there is some strange behaviour going on here. Look at this jsfiddle which was copied and pasted from my code -> http://jsfiddle.net/hxcD3/. The email evaluates to true. But if you visit the website I am working on -> danmacmill.host22.com, and type the same thing into the contact email input, it displays as false.

You will also notice that I logged the email variable passed to JQuery in the console so you can see the exact string. Why it is not validating properly is my question. For reference, here is my validation checker code:

function check(isValid, name, message) {
    if (! isValid(name) ) {
        if (! $('#div-'+name).hasClass("warned") ) {
            $('#div-'+name).prepend('<div class="bubble-wrapper"><div class="bubble"><p>'+message+'</p></div></div>');
            var div = $('#div-'+name).position();
            $('#info p:first-child').text("top: "+div.top);
            $('#info p:nth-child(2)').text("left: "+div.left);
            $('#div-'+name+' .bubble-wrapper').css({
                top: div.top - 35 + "px"
            });
            $('#div-'+name).addClass("warned");
        }
        return false;
    }
    else
        return true;
}

Upvotes: 0

Views: 1292

Answers (1)

Nabil Kadimi
Nabil Kadimi

Reputation: 10384

The regex you mentioned --which is well known by the way, will match 99% of emails.

The only reason why I believe it's not working for you is that you are feeding the function emails with surrounding space or spacing, you must trim emails before testing them.

-- Edit --

Your script (myscript.js:170) has an error:

    if (! check(isEmail, "email", "Invalid email.") ) {

Remove quotes around email variable

    if (! check(isEmail, email, "Invalid email.") ) {

Same thing for lines: 159 and 171

Upvotes: 1

Related Questions