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
– Mike Christensen, Commented Apr 17, 2014 at 18:07
It would be easier and quicker for us if you give us a jsFiddle that we could work with. — SauriolJf
– SauriolJf, Commented Apr 17, 2014 at 18:07
So are you expecting the value to match that string that looks a lot like a regex ? — adeneo
– adeneo, Commented Apr 17, 2014 at 18:08
Also, email [email protected] is perfectly valid, but will fail your check. — Alexey Ten
– Alexey Ten, Commented Apr 17, 2014 at 18:10

Timigen · Accepted Answer · 2019-11-21 02:57:23Z

1

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;
}

edited Nov 21, 2019 at 2:57

answered Apr 17, 2014 at 18:13

Timigen

1,0261 gold badge17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason Fingar · Accepted Answer · 2014-04-17 18:11:07Z

0

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;
}

answered Apr 17, 2014 at 18:11

Jason Fingar

3,3781 gold badge26 silver badges27 bronze badges

Comments

Sireesh Yarlagadda · Accepted Answer · 2014-04-17 18:21:43Z

0

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;
}

answered Apr 17, 2014 at 18:21

Sireesh Yarlagadda

13.9k3 gold badges78 silver badges77 bronze badges

Collectives™ on Stack Overflow

Form validation with javascript not submitting

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related