onSubmit form - Ajax request to validate the form

Question

I have this scenario where when submiting html form we call javascript method to validate the form. Problem is that validation is done through Ajax request calling php function which returns json array which is empty or contains array with errors.

I am using Ajax request as this newValidation function will be used on all forms on my application so all field ids names and stuff is dynamic same as validation messages.

Console log results are:

Undifiend

It should be True or False .

So it looks like .done run after console.log.

I thought .done is waiting until ajax is finished and only then proceed?

Reason why I am asking I need this .done to run first so it can assing answer variable and only then return boolean to the form. Does this even possible?

UPDATED:

Html form:

<form id="systemManagementSettings" action="#" method="POST" onsubmit="return newValidation('systemManagementSettings')">

JavaScript

function newValidation(formId){
var answer;
var $inputs = $('#'+formId+' :input');
    var values = {};
    $inputs.each(function() {           
            values[this.id] = $(this).val();
            $( "div#"+this.id+"_validation" ).text("");
    });

var FinalValidation = $.ajax({
    url: "validation/getValidationData",
    type: "POST",
    data: {form: formId, values: values},

});
FinalValidation.done(function(data){
    var resultArray = JSON.parse(data);

    if($.isEmptyObject(resultArray))
    {
        answer = true;                      
    }
    else
    {
        $.each( resultArray, function( key, value ) {               
            $( "div#"+key+"_validation" ).text(value);              
        });
        answer = false;
    }
});

console.log(answer);    

return answer;
}

Answer 1

How do you prevent the form from actually being submitted? Use event.preventDefault() .

UPDATE

Submit the form in the done function.

function newValidation(formId){
    var answer;
    var $inputs = $('#'+formId+' :input');
        var values = {};
        $inputs.each(function() {           
            values[this.id] = $(this).val();
            $( "div#"+this.id+"_validation" ).text("");
        });

    var FinalValidation = $.ajax({
        url: "validation/getValidationData",
        type: "POST",
        data: {form: formId, values: values},
    });

    FinalValidation.done(function(data){
        var resultArray = JSON.parse(data);

        if($.isEmptyObject(resultArray))
        {
            $.ajax({
                url: $('#'+formId).attr('action'),
                type: "POST",
                data: {form: $('#'+formId).serializeArray()},
            });                      
        }
        else
        {
            $.each( resultArray, function( key, value ) {               
                $( "div#"+key+"_validation" ).text(value);              
            });
        }
    }); 

    return false; //all the time
}