Ajax / PHP表单无法验证

Question

I'm trying to create a contact form that validates and submits without actually refreshing the page, or disrupting the user experience.

I've been using a contact form from www.w3bees.com so far and I've implimented the code, but it doesn't actually validate, it just keeps submitting regardless and I cannot figure out why, so I thought it was time to ask for help.

Here is the exact php code that I am using:

<?php


# request sent using HTTP_X_REQUESTED_WITH
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
if (isset($_POST['name']) AND isset($_POST['email']) AND isset($_POST['subject']) AND     isset($_POST['message'])) {
    $to = '[e-mail]';

    $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    $subject = filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
    $message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
    $sent = email($to, $email, $name, $subject, $message);
    if ($sent) {
        echo 'Message sent!';
    } else {
        echo 'Message couldn\'t sent!';
    }
}
else {
    echo 'All Fields are required';
}
return;
}

/**
 * email function
 *
 * @return bool | void
 **/
function email($to, $from_mail, $from_name, $subject, $message){
$header = array();
$header[] = "MIME-Version: 1.0";
$header[] = "From: {$from_name}<{$from_mail}>";
/* Set message content type HTML*/
$header[] = "Content-type:text/html; charset=iso-8859-1";
$header[] = "Content-Transfer-Encoding: 7bit";
if( mail($to, $subject, $message, implode("
", $header)) ) return true; 
}

?>

Here is the actual contact form:

<form action="" method="post" class="navbar-form navbar-left" id="weeform" role="search" method="post">
        <div class="form-group">
            <label class="sr-only" for="name">Name</label>
          <input type="text" id="name" name="name" class="form-control"   placeholder="Name">

          <label class="sr-only" for="email">Email</label>
          <input type="email" id="email" name="email" class="form-control" placeholder="Email">

          <label class="sr-only" for="subject">Subject</label>
          <input type="text" id="subject" name="subject" class="form-control" placeholder="Message subject">

          <label class="sr-only" for="Message">Message/Query</label>
          <textarea type="text" id="Message" name="message" class="form-control" placeholder="Type message/query here."></textarea>
        </div>
        <button type="submit" class="btn btn-default" id="submit" value"submit">Submit</button>
      </form>

And here is the jQuery:

$(document).ready(function() {
var form = $('#weeform'); // contact form
var submit = $('#submit');  // submit button
var alert = $('.alert'); // alert div for show alert message

// form submit event
form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit
    // sending ajax request through jQuery
    $.ajax({
        url: '', // form action url
        type: 'POST', // form submit method get/post
        dataType: 'html', // request type html/json/xml
        data: form.serialize(), // serialize form data 
        beforeSend: function() {
            alert.fadeOut();
            submit.html('Sending....'); // change submit button text
        },
        success: function(data) {
            alert.html(data).fadeIn(); // fade in response data
            form.trigger('reset'); // reset form
            submit.html('Send Email'); // reset submit button text
        },
        error: function(e) {
            console.log(e)
        }
    });
});
});

It's a lot to look through, but I'm stumped and I've spent more time than I can afford looking at it, so I thought it best to seek advice. Any help would be greatly appreciated.

Answer 1

Without seeing your code it's difficult to diagnose a problem, however it sounds to me that you need to add evt.preventDefault(); at the top of your onsubmit handler