jquery validation plugin with ajax submit handler not working

Question

I've used the jquery validation plugin quite a bit in the last few days, but have yet to use it with an ajax submit. What I have is below cut down to two fields. There are no errors for the values when submitting. There is no submission happening whatsoever when clicking the submit button. It just does nothing.

HTML:

<form id="account-info-form" action="/process/p_profile_info.php" method="post">
    <div class="row margin-bottom-20">
        <div class="col-md-6 form-group">
            <label>First Name</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user fa-fw"></i>
                </span>
                <input class="form-control" type="text" name="fname"/>
            </div>
        </div>
        <div class="col-md-6 form-group">
            <label>Last Name</label>
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-user fa-fw"></i>
                </span>
                <input class="form-control" type="text" name="lname"/>
            </div>
        </div>
    </div>
    <div class="row margin-bottom-30">
        <div class="col-md-12">
            <button class="btn btn-primary" type="submit" name="account-info" value="save"><i class="fa fa-check-circle"></i> Save Changes</button>
            <button class="btn btn-default" type="reset">Cancel</button>
        </div>
    </div>
</form>

JS:

$('#account-info-form').validate({          
    // ajax submit
    submitHandler: function (form) {
    var $form = $(this);
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            dataType : 'json'
        })
        .done(function (response) {
            if (response.success == 'success')
            {               
        alert('success');                       
            } 
            else
            {
                alert('fail');
            }
        });
    return false; // required to block normal submit since you used ajax
    }
});

Answer 1

There is no reason to do this, (and $(this) is not what you're expecting it to be)...

var $form = $(this);

Simply use the form argument that's passed into the function.

submitHandler: function (form) {
    $.ajax({
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        dataType : 'json'
    })
    .done(function (response) {
        if (response.success == 'success') {               
            alert('success');                       
        } else {
            alert('fail');
        }
    });
    return false; // required to block normal submit since you used ajax
}