jQuery ajax - validate with ajax and if no error, submit form and redirect

Question

Note: I don't want to submit with ajax, but to validate with ajax, and then, if success, submit it. But it is not working.

I have a HTML form with action of some Django url. Now, to validate it at web side and then at server side, I do this:

• jQuery.validate() the form, if valid, enable the button with id submit. This button has no name= attribute.
• The button is a plain button type="button". I click it to ajax the form data($('#formManager').serialize()), to an URL named verifyScript to do server side verification. This function returns Django JSONResponse as result.
• In the success: function(returned, status, xhr){} handler, I want to submit the form with $('#formManager').submit(); in this action I do a redirection to other pages. But the form is not submitted. The JS code is executed, but nothing happens and no redirection. async is set to false.

My template form:

<form role="form" enctype="multipart/form-data" method="post" id="formManager" onsubmit="activate(this)" action=
    {% if action == "edit" %} 
        "{% url 'modifyScript' %}"
    {% elif action == "create" or action == "copy" %}
        "{% url 'createScript' %}"
    {% endif %}
>
...
<button type="button" id="submit"  class="btn btn-success">
    {% if action == 'edit' %}
        Edit Script
    {% elif action == 'create' %}
        Create Script
    {% elif action == 'copy' %}
        Copy Script
    {% endif %}
</button>

jQuery code:

$(document).ready(function() {
....

/* remove the "disabled" attribute when we submit the form when editing */
function activate(form) {
    $(form).find("select").each(function(i, e) {
        if ($(e).disabled == true) {
            $(e).prop("disabled", false);
        }
    });
    var input = $(form).find("#machine");
    if (input.prop("disabled") == true) {
        input.prop("disabled", false);
    }
}

$('#submit').click(function(){
    $.ajax({
        type:       "POST",
        url:        "{% url 'verifyScript'%}",
        data:       $('#formManager').serialize(),
        dataType:   "json",
        async:      false,
        success:    submitForm

    })
});
});

});

function submitForm(returned, status, xhr) {
    var success = returned['success'];
    if (success) {
        $("#formManager").submit();
        return;
    } else {
        $('#verifyError').html(returned['errorMsg']);
        $('#myModalVerify').modal('show');
        return;
    }
}

I think it is a known issue. I have seen questions alike but none of the solutions works. For example this and this, but they don't solve my problem.

But checking these question have inspired me to pay attention to:

• extract success callback to be a separated callable, without () and parameters;
• add return in said callable
• assure that there is no elements with name="submit" in the same page
• ensure to make the button type to be type="button" to prevent calling the form action before validation.

But it is still not submitted.

EDIT1:

change async to false.

I created this JSFiddle example trying to show with real code, but the verification and submitting seem not possible(if someone can mock this please feel free to update). The main idea is a form with some disabled fields needs to be ajax-verified, and if the return result contains "success", we submit it. And, on submission, we need to activate the disabled fields before sending the data to server, so we have the onsubmit function.

I have figured it out: onsubmit should return true to submit the form. , but I need some more enlightenment on this: why?