Question

I have a nice looking slideup/slidedown jquery form on my website. It sends the data to the same file to send the email. This works fine:

$(document).ready(function(){
    $('div.contact a.submit').click(function() {
        var name = $('div.contact input.name').val();
        var email = $('div.contact input.email').val();
        var message = $('div.contact textarea.message').val();
        $('div.contact').slideUp('slow', function() {
            $.ajax({
                type: "POST",
                url: "test.php",
                data: "name=" + name + "&email=" + email + "&message=" + message,
                success: function(msg)
                {
                    $('div.contact').html('<h1>Contact</h1><div class="comment">Success!</div><div class="clear"></div><p class="indent">Thank you, we will be in contact shortly.</p>');
                    $('div.contact').slideDown('slow');
                }//end of success
            });//end of ajax
        });
    });
});

The php at the top of test.php to send the email:

include("expander-b1.0.php");
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
sendmail("[e-mail]", $message, "Contact message from $name", $email);

This is getting my simple mail function from a external file. However, I would like some way to validate the form entry (including email validation), then display the error(s) in the contact dive. I am not that experienced with jQuery or ajax but an unable to get it working with using if statements in my php and echoing the variables in the “success” part of the ajax.

Answer 1

$(document).ready(function(){
    $('div.contact a.submit').click(function() {
        var name = $('div.contact input.name').val();
        var email = $('div.contact input.email').val();
        var message = $('div.contact textarea.message').val();

        //Email Validation
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(reg.test(email) == false) {
            alert('Invalid Email Address');
            return false;
        }
        //Name and message VALIDATION
        //-------- goes here ------------//

        $('div.contact').slideUp('slow', function() {
            $.ajax({
                type: "POST",
                url: "test.php",
                data: "name=" + name + "&email=" + email + "&message=" + message,
                success: function(msg)
                {
                    $('div.contact').html('<h1>Contact</h1><div class="comment">Success!</div><div class="clear"></div><p class="indent">Thank you, we will be in contact shortly.</p>');
                    $('div.contact').slideDown('slow');
                }//end of success
            });//end of ajax
        });
    });
});