Jquery AJAX submission form error

Question

I have created a basic submission form using expression engine's plugin free form. From the CMS side of things my data is being submitted into the EE CMS. However after i have submitted my details, rather than receiving a success message i receive the following message on my form object object. <div id="form-messages" class="success">[object Object]</div>

I am assuming this has something to do with my jquery As the function was working when i was validating the submission through php.

Below is a snippet of my code.

var form = $('#ajax-contact');
var formMessages = $('#form-messages');

$(form).submit(function(e) {

e.preventDefault();
var formData = $(form).serialize();

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
})
.done(function(response) {
    //  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('');
})
.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.');
    }
});

})

HTML

<div id="form-messages" class="success"></div>

exp:freeform:form 
            form_id="1"
            admin_notify="me@email.com"
            form:class="main-contact submit-fade ajax-form"
            form:id="ajax-contact"


        }

            <ul class="small-block-grid-2 medium-block-grid-2 hide-form">
               <li>
                  <label for="name">Name</label>
                  {freeform:field:first_name
                      attr:class="form-control" 
                      attr:placeholder="First Name" 
                      attr:class="required"
                  }

                </li>

                <li>
                  <label for="email">Email</label>
                  {freeform:field:email
                      attr:class="form-control" 
                      attr:placeholder="Email" 
                      attr:class="required"
                  }
                 </li>
              </ul>
              <input type="submit" class="btn btn-success">

        {/exp:freeform:form}

Answer 1

The response is being parsed as JSON. Use:

.done(function(response) {
    if (response.success) {
        formMessages.removeClass("error").addClass("success").text("Success!");
        $("#name,#email").val("");
    } else {
        formMessages.removeClass("success").addClass("error").text("Oops, failure!");
    }
})