Form validation with javascript not submitting

Question

I've been having trouble with validating an email input in a form.

Now I'm able to alert the user if they didn't input an email, or if the input is incorrect. However, if the input IS correct, it still alerts that the input is incorrect.

document.getElementById("frmContact").onsubmit = function() {

    if (document.getElementById("email").value=="") {
        alert("Please enter your email.")
        return false;
    } else if (document.getElementById("email").value !== "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"){
        alert("Please enter a valid email address.");
        return false;
    } else {
        return true;
    }
};

It looks like you're comparing the input to a regular expression, not using a regular expression to *match* the input. — Mike Christensen, Apr 17 '14 at 18:07
It would be easier and quicker for us if you give us a jsFiddle that we could work with. — SauriolJf, Apr 17 '14 at 18:07
So are you expecting the value to match that string that looks a lot like a regex ? — adeneo, Apr 17 '14 at 18:08
Also, email `john@louvre.museum` is perfectly valid, but will fail your check. — Alexey Ten, Apr 17 '14 at 18:10
possible duplicate of [JavaScript: check a string matches a regex?](http://stackoverflow.com/questions/6603015/javascript-check-a-string-matches-a-regex) — showdev, Apr 17 '14 at 18:12

Timigen · Accepted Answer · 2019-11-21T02:57:23.677

The reason you are getting the invalid email alert is this line of code:

else if (document.getElementById("email").value !== "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$")

This says if the content of the input tag with the id attribute of "email" does not equal the following string "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$" then alert Please enter a valid email address.

What you want is to test that the input matches that regular expression like so:

var inputString = document.getElementById("email").value,
    patt = new RegExp("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$");

if (inputString === '') {
    alert("Please enter your email.")
    return false;
}
else if(!patt.test(inputString)) 
{//if the regex you specified matches its valid email(according to your regex) so negate and display error msg 
    alert("invalid e-mail");
    return false;
}
else
{
     return true;
}

score 0 · Answer 2 · answered Apr 17 '14 at 18:11

You are using the regular expression incorrectly; you don't want to compare the email string to the regex string directly; you need to use javascript's match() method to test your value against a regular expression. For example:

var regex = "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$";
var matches = document.getElementById("email").value.match(regex);
if(!matches.length){
    alert("bad email");
    return false;
}

score 0 · Answer 3 · answered Apr 17 '14 at 18:21

Try this: It returns boolean value based on its validity

document.getElementById("frmContact").onsubmit = function() {

    if (document.getElementById("email").value=="") {
        alert("Please enter your email.")
        return false;
    } else if (!validEmail(document.getElementById("email").value)){
        alert("Please enter a valid email address.");
        return false;
    } else {
        return true;
    }
};


function validEmail(e) {
    var filter = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
    return String(e).search(filter) != -1;
}

Form validation with javascript not submitting

3 Answers3