Jquery and Contact form validation

I am trying to add validation rules to the email portion of the contact form so that the field is not blank and is a valid e-mail address.

How can I achieve this?

I would also like to add an automatic response that is sent to the user once the form is submitted?

$("#ContactForm").submit( function() {
    $.ajax({
        type: "POST",
        url: "{homepage}mailer/mailer.php",
        data: $(this).serialize(),
        success: function(data){
            $('#fancybox-content #quote_box #ContactForm').html('<div style="padding-top: 15px; text-align:center;">Message Sent! Thank you.</div>');
            setTimeout(function(){
                $.fancybox.close();
            },3500);
        }
    });
});

<form id="ContactForm" name="ContactForm" action="{homepage}mailer/mailer.php" method="post">
    <input type="hidden" name="_sendto" value="email@test.com">
    <input type="hidden" name="_subject" value="Quote Request">
    <label for="name">Name</label><input type="text" name="name"><br>
    <label for="title">Title</label><input type="text" name="title"><br>

    <label for="customer_segment">Customer segment</label><input type="text" id="customer_segment" name="customer_segment" value=""><br>
    <label for="company">Company</label><input type="text" name="company"><br>
    <label for="email">Email</label><input type="text" name="email"><br>
    <label for="phone">Phone</label><input type="text" name="phone"><br>
    <label for="city">City</label><input type="text" name="city"><br>
    <label for="state">State</label><input type="text" name="state"><br>
    <label for="country">Country</label><input type="text" name="country"><br>
    <label for="contact_interested_in">Product interested in</label><input type="text" name="prod_inquiry" value="{exp:cookie_plus:get name="" parse="inward"}{exp:channel:entries entry_id="{cookie}"}{title}{/exp:channel:entries}{/exp:cookie_plus:get}"><br>
    <label for="contact_preference">Contact preference</label>
    <input class="radio" type="radio" name="contact_preference" value="开发者_运维百科Phone"> <span class="label">Phone</span>
    <input class="radio" type="radio" name="contact_preference" value="Email"> <span class="label">Email</span><br>
    <input id="button" type="submit" value="Submit" />
</form>

Please take note that I did not create this code and am not very familiar with it, we had a development company create our site and I am only trying to expand it to suit our needs I just need a bit of direction.

Take a look at http://unwrongest.com/projects/valid8/ (there are about 500 other 'form validation' plugins). This one is just my favorite as it is very slim and simple.

Enclose your $.ajax call with an if statement that checks the email input value with a regular expression. Google "regular expression email javascript" and you shall find what you seek.

Note though that validating forms in javascript is not very safe since anyone with some programming knowledge could check the source of your page and circumvent your validation by posting directly to your php-script. Better to validate in "mailer.php", return any errors to your $.ajax success-callback and just use javascript to display an error message to the user.

Since you're not familiar with the third-party developer's work, and the site is built with ExpressionEngine, you might consider replacing the custom form processor with the popular Solspace Freeform Module:

Freeform allows you to create simple and flexible forms on your site to collect information from your users.

Postings to your forms are recorded and organized in your EE database as well as optionally mailed to the notification emails you supply.

You can receive attachments from submitters and have those attachments stored in your database as well as mailed back out as attachments to admins or the submitting user.

Among it's many features, Freeform provides server-side form validation, notification and confirmation emails and CAPTCHA integration -- as a bonus, Freeform is free and its features are well-documented.

You could even use the jQuery Validation Plugin alongside Freeform to provide client-side data validation or submit the form using an asynchronous HTTP (Ajax) request.

Be careful if you attempt to validate an e-mail address against a regular expression you find on google. AFAIK, there is no single regular expression that can correctly validate an email address according to RFC 2822. Most of the ones you will find out there will either incorrectly reject valid e-mail addresses or accept invalid ones. The closest regular expression I have found was a page and a half long printed out.

EDIT:

For instance, all of these are valid e-mail addresses, and if you are validating e-mail addresses all of these should be allowed:

1. Abc\@def"@example.com
2. "Fred Bloggs"@example.com
3. "Joe\Blow"@example.com
4. "Abc@def"@example.com
5. customer/department=shipping@example.com
6. $A12345@example.com
7. !def!xyz%abc@example.com
8. _somename@example.com