Ajax not submitting contact form

Question

I have never created a contact form before and am having problems getting this one to submit for some reason. It validates fine but when I click submit, it does nothing. No errors. Nothing. I have been working on this for literally 12+ hours and for the life of me I cannot figure out what's wrong. Here is the jquery code that contains the AJAX code.

$(document).ready(function () {
    $("#form1").validationEngine({
        ajaxSubmit: true,
        ajaxSubmitFile: "ajaxSubmit.php",
        ajaxSubmitMessage: "Thank you, We will contact you soon !",
        inlineValidation: false,
        success: function () {
            callSuccessFunction()
        },
        failure: function () {}
    })
});

And here is the code for the form on the html page

<form class="form" id="form1" method="post" action="ajaxSubmit.php">   
    <input class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" name="name" id="name"  placeholder="How may I address you?"><label for='name '>name</label><br />
    <input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" placeholder="I promise, I hate spam as much as you do."><label for='email '>email</label><br />
    <input class="validate[required,length[0,100]] text-input" type="text" name="budget" id="budget" placeholder="$USD amount, please."><label for='budget '>budget</label><br />
    <textarea name="message" class="validate[required,length[6,300]] text-input" id="comment" placeholder="What's on your mind?"></textarea><br />
    <p class="submit"><input type="submit" value="Send"></p>
</form>

And this is the "ajaxSubmit.php code in full

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$budget = $_POST['budget'];
$body = $_POST['text'];
$receiver = "inquiry@seednouveau.com";
if (!empty($name) & !empty($email) && !empty($body)) {
    $body = "Name:{$name}\n\nBudget :{$budget}\n\nComments:{$body}";
    $send = mail($email, 'Contact Form Submission', $body, "From: {$email}");
    if ($send) {
        echo 'true';
    }

}

?>

I'm pulling my hair out here because I really want this particular form to work, and I am SOOOOOO close. I like the way it validated on the same page, instead of after the user has attempted to submit an incorrectly filled out form. I really don't want my users to type out a whole email then have it lost because they didn't enter something, or entered it wrong.

Answer 1

After looking into it further, there is another error which certainly going to be causing you trouble. Your form contains fields named

name, email, budget, message

Unfortunately, your PHP page is looking for fields named

name, email, budget, text

Your PHP script is not going to be able to find a field named "text", so it seems possible that your form is actually submitting, but your PHP script is not returning the "true" required to get the library to think it's fully finished. If you fix the message/text naming issue, you should be closer to a working round trip.

Answer 2

Assuming you're using the 2.6.1 version of jquery-validation-engine, there is no "onlyLetter", you need to change it to "onlyLetterSp".

<input class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" name="name" id="name"  placeholder="How may I address you?"><label for='name '>name</label><br />

to

<input class="validate[required,custom[onlyLetterSp],length[0,100]] text-input" type="text" name="name" id="name"  placeholder="How may I address you?"><label for='name '>name</label><br />