Ajax submit in hidden form validation not executed

I have the following situation:

I have a button. When clicked, a hidden form and submit button appears. The form is validated using the jQuery Validation plugin. In the submit handler, I want to submit the form using Ajax. My problem is, the code I wrote in the submit handler does not seem to execute.

HTML page:

<div class='col-md-9'>
    <div class='media-body'>
        <form id='accountForm'>
            <div class='input-group'>
                <div class='input-group-addon'>
                    First name:
                </div>
                <input class='form-control' type='text' name='firstName'>
            </div>
            <!--- some more inputs --->
        </form>
    </div>
</div>
<div class='col-md-3'>
    <div class='btn-group btn-group-vertical'>
        <!--- some buttons --->
        <button id='saveButton' class='btn' type='submit' form='accountForm'>
    </div>
</div>

JavaScript file:

$(document).ready(function() {

    $('#accountForm').hide();
    $('#saveButton').hide();

    $('#editInfoButton').on('click', function() {
        $('#accountForm').show();
        $('#saveButton').show();
    });

    $('#accountForm').validate({
        rules: //some rules
        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: '/account/profile',
                data: $(form).serialize(),
                success: function(data, status, jqXHR) {
                    //some stuff
                }
            });
            return false;
        }
    });
});

When I click on the submit button, there is no POST-request send to /account/profile but a GET-request to /account?firstName=.... I don't really understand why this isn't working.