Using Javascript Bootbox with Ajax.BeginForm In ASP.NET - asp.net-mvc

Question

In view page:
#using (Ajax.BeginForm("UpdateAccount", "AccountInfo", new AjaxOptions {
HttpMethod = "POST",
AllowCache = false,
OnSuccess = "accountUpdateRequestSuccess",
OnFailure = "formSubmissionFailed",
OnBegin = "validateAccountInformation"
}))
validateAccountInformation function is stated below:
function validateAccountInformation() {
if (error.length > 0) {
showErrorNotification(errorListHtml);
return false;
}
else {
if ( Some Conditions ) {
bootbox.confirm({
title: "Confirm",
size: "medium",
message: "Some Message",
callback: function (result) {
if (result) {
Some Code
}
else {
Some Code
}
}
});
}
}
When Save button is clicked, at first validateAccountInformation function is called. If there's no error it will raise a Bootbox. If Bootbox OK button is clicked it'll submit the form with certain values or if Bootbox CANCEL button is clicked it'll submit the form with certain values different than before.
Now, the problem I'm facing is, when user clicks SAVE button it goes to validateAccountInformation function. And if there is no errors it calls Bootbox.Confirm. What I've expected that form submission will be held until some OK/CANCEL button is clicked in Bootbox. But it does not wait for Bootbox. Meaning Bootbox callback function is never called. It might have something to do with AJAX being asynchronous.
I've used javascript confirm method. And this method does hold form submission.
function validateAccountInformation() {
if (error.length > 0) {
showErrorNotification(errorListHtml);
return false;
}
else {
if ( Some Conditions ) {
if (confirm("check")) {
some code
}
}
}
}
Is there some way where I can use Bootbox Confirmation box with Ajax Begin Form as per scenario described above?

Answer 1

I've changed the flow and have been able to integrate Bootbox.
What I've done is, I've omitted the onBegin function. So my view page looks like this
#using (Ajax.BeginForm("UpdateAccount", "AccountInfo", new AjaxOptions {
HttpMethod = "POST",
AllowCache = false,
OnSuccess = "accountUpdateRequestSuccess",
OnFailure = "formSubmissionFailed",
}))
Now I've added a function which is fired by onclick event of this forms summit button. And integrated validateAccountInformation function and Bootbox within this function. Now the important part here is, this function always returns false. By returning false I've managed to hold on the form submission. Now the onClick event function looks like
$(document).on('click', '#btn-edit-account-save', function () {
var submit = validateAccountInformation();
some code
if (submit == true) {
if (some condition)
{
$('Form').submit();
}
else
{
bootbox.confirm(
{
title: "Confirm",
size: "medium",
message: "Some Message",
callback: function (result)
{
if (result)
{
$('Form').submit();
}
else
{
some code
}
}
});
}
}
return false;
});