Email Validation with JavaScript

Question

Possible Duplicate:
Validate email address in Javascript?

This is my first post and I have a small issue. I'm trying to validate an email address on a form, but with no luck. I found this snippet on the internet but it doesn't seem to be working. I'm using Javascript at the moment to validate it. I don't usually use JS, so any help would be appreciated.

<script type="text/javascript">
    function ValidateEmail(inputText)  
    {  
       var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
       if(inputText.value.match(mailformat))  
       {  
           document.forms.emailform();  
           return true;  
       }  
       else  
       {  
           alert("You have entered an invalid email address!");  
           document.forms.emailform();  
           return false;  
       }  
    }

<?php
    $addemail .= '

        <form method="post" action="cart2.php" name="emailform" onsubmit="return validateEmail">
        ';
    $addemail .= '
            E-mail Address: <input type="text" name="email" value="'.$row6['email'].'" size="19" /><input type="hidden" name="cartid" value="'.$cart.'" />';
        if ( $emailerror != '' )
            {
                $addemail .= '<img src="images/email_error.png" width="16" height="16" hspace="4" alt="E-mail Error" />';
            }
        $addemail .= '
            <input type="image" name="Add E-mail Address" alt="Add E-mail Address" src="images/addemail.gif" style="vertical-align:middle" />
        </form>
    ';
    if ( $row6['email'] == '' )
        {
            $emailpresent = 0;
        }
    else
        {
            $emailpresent = 1;
        }
}
        $addemail .= '
                </td>
            </tr>
        ';
}

?>

What do you mean by `not working`? Is your form not submitting(there may be a typo as you are calling `document.forms.emailForm()` which is invalid)? — MD Sayem Ahmed, Dec 06 '12 at 17:07
That regex attempts to ban some perfectly valid and real email addresses (ones with a `+` in them and ones from the `museum` and `info` TLDs spring to mind). — Quentin, Dec 06 '12 at 17:09
HTML5 defines a new input `type="email"`. It has the attribute `pattern` where you can specify a regex. More details [here](http://www.w3.org/TR/html-markup/input.email.html) — Toni Toni Chopper, Dec 06 '12 at 17:13

Felix Glas · Answer 1 · 2012-12-06T19:19:36.920

Look at this example of how it can be done in Javascript:

<html>

<head>
<script type="text/javascript">
<!--
function validateEmail() {
    var emailText = document.getElementById('email').value;
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    if (pattern.test(emailText)) {
        return true;
    } else {
        alert('Bad email address: ' + emailText);
        return false;
    }
}

window.onload = function() {
    document.getElementById('email_form').onsubmit = validateEmail;
}
</script>

</head>
<body>

<form id="email_form">
<input type="text" id="email">
<input type="submit">
</form>

</body>
</html>

Edit:

If you are sure that the users of your web page are using HTML5 compatible browsers you can use the following neater example for the same purpose:

<!DOCTYPE html>

<html>
    <body>
        <form>
            <input type="email" pattern="^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$">
            <input type="submit">
        </form>
    </body>
</html>

score 0 · Answer 2 · answered Dec 06 '12 at 17:08

0

onsubmit="return validateEmail()"

You must add parentheses after validateEmail in order to call it or it will assume you're trying to return a method.

answered Dec 06 '12 at 17:08

Neil

5,762
24
36

Email Validation with JavaScript

2 Answers2

Linked