PHP / Ajax联系表单重定向到PHP文件

I'm in the middle of developing a contact form for a portfolio I'm working on and when I click the submit button to send the message, instead of displaying the bootstrap alert message below the form, the page redirects to the PHP file.

I'm receiving the email in my inbox from the form after submitting valid details but even though I'm using ajax I'm still getting redirected.

Example at http://nickcookweb.co.uk/#contact.

EDIT: preventDefault(); doesn't seem to be working at all.

HTML:

<form id="contactForm" name="contactForm" action="contact.php" method="POST">

    <input type="text" name="name" id="name" placeholder="Full Name (Required)" required/>

    <input type="email" name="email" id="email" placeholder="Email (Required)" required/>

    <input type="tel" name="tel" id="tel" placeholder="Contact Number"/>

    <textarea type="text" name="message" id="message" placeholder="Message (Required)" required></textarea>

    <button type="submit" id="sendButton" class="button">Send<span class="fa fa-paper-plane" aria-hidden="true" style="margin-left:6px; top:2px"></span></button>

</form>

<div id="contactSuccess" class="alert alert-success">
    <span>
        <p>Message sent successfully.</p>
    </span>
</div>

<div id="contactError" class="alert alert-danger">
    <span>
        <p>There was an error sending your message. Please try again.</p>
    </span>
</div>

PHP:

<?php

$to = "contact@nickcookweb.co.uk"; 

$from = $_REQUEST['email']; 

$name = $_REQUEST['name']; 

$message = $_REQUEST['message']; 

$headers = "From: $from"; 

$subject = "New Message via Portfolio"; 

$fields = array(); 

$fields{"name"} = "name"; 

$fields{"email"} = "email"; 

$fields{"tel"} = "tel"; 

$fields{"message"} = "message";

$body = "Details:"; 

foreach($fields as $a => $b) {   

    $body .= sprintf("%20s: %s
",$b,$_REQUEST[$a]); 

}

$send = mail($to, $subject, $body, $headers);

?>

JS:

$(function() {
$('#contactForm').validate({
    rules: {
        name: {
            required: true,
            minlength: 2
        },
        email: {
            required: true,
            email: true
        },
        tel: {
            required: true
        },
        message: {
            required: true,
            minlength: 10
        }
    },
    messages: {
        name: {
            required: "Please provide your name",
            minlength: "Your name must be at least 2 characters long"
        },
        email: {
            required: "Please provide your email address"
        },
        message: {
            required: "Please enter a message",
            minlength: "Your message must be at least 10 character long"
        },
    },
    submitHandler: function(form) {
        $(form).ajaxSubmit({
            type:"POST",
            data: $(form).serialize(),
            url:"contact.php",
            success: function() {
                $('#contactForm :input').attr('disabled', 'disabled');
                $('#contactForm').fadeTo( "slow", 0.15, function() {
                    $(this).find(':input').attr('disabled', 'disabled');
                    $(this).find('label').css('cursor','default');
                    $('#contactSuccess').fadeIn();
                });
            },
            error: function() {
                $('#contactForm').fadeTo( "slow", 0.15, function() {
                    $('#contactError').fadeIn();
                });
            }
        });
    }
});
});

Use a button with type="button" or add a call to 'preventDefault()' to avoid submitting the form.

Just add this attribute to ur form to prevent default action.

<form id="contactForm" name="contactForm" action="contact.php" method="POST" onsubmit="return false">

$('#yourButton').on('click', function{ 
  event.preventDefault();
  //do your ajax and on success show msg
})

I've tested this locally (without an actual contact.php) but it is working locally.

$('#form').validate({
  submitHandler: function(form) {
    $.ajax({
      url: form.action,
      type: form.method,
      data: $(form).serialize(),
      success: function(response) {
        console.log(response);
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="contact.php" method="post" id="form">
  <label for="name">Name:</label>
  <input name="name" type="text" required="" />
  <input type="submit" />
</form>

</div>