Почему меня перенаправляют на файл php в этой контактной форме?

Question

У меня есть контактная форма, которая работает с ajax. Все в порядке, но когда пользователь нажимает кнопку «Отправить», он перенаправляется в файл php вместо того, чтобы оставаться на странице и отображать сообщения об успехах или ошибках. В верхней части контактной формы есть элемент, где я хочу показать сообщения.

Это контактная форма:

<div class="success error" id="form-messages"></div>
<form id="contact-form" action="mailer.php" method="post">
<div class="form-input mt-15">
    <label>Name</label>
    <div class="input-items default">
        <input type="text" placeholder="Name" name="name"
required>
        <i class="lni-user"></i>
    </div>
</div>
<!-- form input -->
<div class="form-input mt-15">
    <label>Email</label>
    <div class="input-items default">
        <input type="email" placeholder="Email" name="email"
required>
        <i class="lni-envelope"></i>
    </div>
</div>
<!-- form input -->
<div class="form-input mt-15">
    <label>Message</label>
    <div class="input-items default">
        <textarea placeholder="Message" name="message" required
</textarea>
        <i class="lni-pencil-alt"></i>
    </div>
</div>
<!-- form input -->
<p class="form-message"></p>
<div class="form-input rounded-buttons mt-20">
    <button type="submit" class="main-btn rounded
three">Submit</button>
</div>
<!-- form input -->
</form>

Это код. js:

$(function() {
// Get the form.
var form = $('#contact-form');

// Get the messages div.
var formMessages = $('#form-messages');

// Set up an event listener for the contact form.
$(form).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    });
    .done(function(response) {
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');

        // Set the message text.
        $(formMessages).text(response);

        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        $('#message').val('');
    })

    .fail(function(data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');

        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Oops! An error occured and
your message could not be sent.');
        }
        });
    });
});

Я читал урок.

Answer 1

Ошибки в вашем коде:

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
});
.done(function(response) {

^ у вас есть ; после начального оператора ajax, синтаксическая ошибка, поэтому 'done' никогда не будет выполнен.

вот рабочая скрипка: https://jsfiddle.net/4pf2d501/