jQuery/ajax form - send to php problem

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("admin@site.co.uk", $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
        });
    });
});

Answer 2

you need to use mysql_real_escape() to filter evil code in the post and you can use regular expression to check for a valid email. if you google for it you will find a lot of documentation and tutorials about that.

you can also make it easy on yourself and buy (or find a free one) a ready to use validation class -> Codecanyon validation class

and about the success part have a look at this question -> how can i create a success back function?

Answer 3

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

A JQuery-based validation script that works very well to validate and automatically insert error messages if a section of your code fails validation. Simply include files, add jquery (see source of examples for best methods) and add the "required" element to your class names. Should be a perfect solution to your problem....with no crazy math or individual selectors required.