Javascript Email Validation - Help?

Question

I am currently using a email form, which posts some text once the email address has been submitted. I would like to add a validation option to this so that I don't get bogus info sent to me. Below I have attached the html code, javascript, php, and the validation code I'd like to use. I am currently running into the problem of the form still processing even though the email is not valid. Please help.

HTML

<form action="scripts/women-logo-white-process.php" method="post" id="contact_form_women_logo_white" name="ContactForm" onsubmit="return ValidateContactForm();">
     <div style="width: 179px; margin-left: 115px">
          <div style="width: 179px;">
               <input type="text" name="Email" id="email" value="email" rel="req" tabindex="2" class="text-area" />
          </div>
          <div id="loader" style="width: 121px; margin-left: 27px;">
               <div class="submit-button" style="width:121px;"><input type="submit" name="" value=""></div>
          </div>
      </div>
</form>

PHP

<?php 
$toemail = 'orders@paroteesclothing.com';;
$email = $_POST['email'];;

$messageBody = "Email: " . $email;



if(mail($toemail, 'Mens Logo White' . $subject, 'From: ' . $email)) {
    echo '
    <div>
      <div class="success"></div>
      <div class="email-text">Thank you for your interest in our products. We will notify you as soon as this product is available. Until then please check back for new designs and follow use on Twitter & Facebook @ParoteesApparel.</div>
    </div>';
} else {
    echo '
    <div>
      <div class="error"></div>
      <div class="email-text">There was a problem with your submission, please reload this page and try again.</div>
    </div>';
}
?>

Current Javascript

$(function () {
    $('#contact_form_men_logo_white').submit(function (e) {
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $('#loader', form).html('<div style="margin-left: -30px; margin-bottom: 35px; margin-top: -20px;"><div class="loader"></div><div class="wait-text">Please wait...</div></div>');
        $.ajax({
            type: 'POST',
            url: post_url,
            data: post_data,
            success: function (msg) {
                $(form).fadeOut(500, function () {
                    form.html(msg).fadeIn();
                });
            }
        });
    });
});

Validation Script I'd Like To Add to My Current Javascript

function ValidateContactForm() {
    var email = document.ContactForm.Email;

    if (email.value == "")
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf("@", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf(".", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    return true;
}

Answer 1

Here's a working example of the regex script Grrbrr was talking about :

where $("#email") would be your form input element :

$("#email").blur(function () {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = $(this).val();
if(reg.test(address) == false) {
$("#valbox").removeClass().addClass("valincorrect").html('Please enter a valid e-   mail').fadeIn(500)

 } else {
$("#valbox").removeClass().addClass("valcorrect").html('Accepted')

  }
 })

Answer 2

Doing validation in javascript is a fool's errand, especially since you are NOT doing the validation in PHP as well. it is trivial to bypass a Javascript validator and send bogus information to the server directly.

While JS validation IS useful to provide immediate feedback, it should NOT be relied upon to actually protect your server-side code.

Change your PHP to something like:

$email = $_POST['email'];;

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
   die("Invalid email address");
}