Form page with Recaptcha getting reload after Ajax call

Question

Hi, I have a form with Google recaptcha which is being validated from client as well as server side without any issue. I am doing a AJAX post call to my api using jquery for validating captcha on server side and it returns response either success or fail. On failed response, I prevents the form to be submit and on success response, i allows form to go ahead and submit. Now the problem is, forms is getting reload, but not getting submit. I have mentioned my code below. I did a lot search and tried each and everything, but no success. Could anyone please help me out on this?

<script type="text/javascript">
$(document).ready(function () {
$(".sfFormSubmit input[type='submit']").attr("disabled", true);
var captchaForm = $('.g-recaptcha').parents('form').first();
captchaForm.submit(function (e) {
var response = grecaptcha.getResponse();
if (response.length == 0) {
e.preventDefault();
grecaptcha.reset();
return false;
}
else {
e.preventDefault();
var self = this;
$.ajax(
{
url: "/api/Captcha/Validate/",
type: "POST",
dataType: 'json',
data: "=" + response //processData: false
}).done(function (result) {
var captchaResponse = jQuery.parseJSON(result);
if (captchaResponse.success) {
self.submit(); //return true;
} else {
var error = captchaResponse["error-codes"][0];
$('#errStatus').html("RECaptcha error- " + error);
$('#errStatus').show(); //return false;
}
}).fail(function (xhr, status) {
var err = "Error " + " " + status;
if (xhr.responseText && xhr.responseText[0] == "{")
err = JSON.parse(xhr.responseText).message;
console.log(err);
$('#errStatus').html("RECaptcha api error- " + error);
$('#errStatus').show(); //return false;
});
}
}); });
function onReturnCallback() {
$(".sfFormSubmit input[type='submit']").attr("disabled", false);
}

Thanks