form not submitting after js and ajax validation

Question

I am using ajax to validate user credentials after i have validated the user has input data into the required fields but afterwords the form is not being submitted. I have created a variable submit_form which is supposed to determine if the default form action is performed or not but when set it to true and console log it, it still seems to continue it's default value of false, why is it like that and how can change it so my form can submit after the username and password are correct. Here is my screenshot of the console in the browser

Here is a my code:

/*global $*/
/*global _*/

$(document).ready(function() {
    'use strict';
    $('#login-form').on('submit', function(event) {
        var form_items = {
            username: { required: true, name: 'Username' },
            password: { required: true, name: 'Password' },
            token: {}
        };   

        var $login_form = $(this);
        var submit_form = false;
        var errors;
        var display = '';
        var data;

        var validation = new Validation( form_items );
        validation = validation.check( $login_form['context'] );

        // If any element has the class for errors, remove the class
        $('.has-error').removeClass('has-error');

        if ( validation.passed() ) {
            data = JSON.stringify( validation.getData() );
            $.ajax({
                method: "POST",
                url: "ajax/login.ajax.php",
                data: { info: data }
            }).done(function( response ) {
                response = JSON.parse(response);

                // if the error list display is there, remove it
                $('.bg-danger').parent().remove();
                if ( _.has(response, 'errors') ) {
                    errors = response['errors'];
                    display = '<div class="form-group"><ul class="bg-danger">';
                    if ( _.isArray(errors) || _.isObject(errors) ) {
                        _.each( errors, function(elem, index, list) {
                            display += '<li>' + elem + '</li>';
                        });
                    } else {
                        display += '<li>' + errors + '</li>';
                    }
                    display += '</ul></div>';
                    $login_form.prepend( display );
                } else {
                    submit_form = true;
                }
            });
            console.log( submit_form );
        } else {
            // if the error list display is there, remove it
            $('.bg-danger').parent().remove();

            errors = validation.getErrors();
            display = '<div class="form-group"><ul class="bg-danger">';
            _.each( errors, function(elem, index, list) {
                var $form_element = $('#'+index); // get form element
                $form_element.parent().parent().addClass('has-error');
                display += '<li>' + elem + '</li>';
            });
            display += '</ul></div>';
            $login_form.prepend( display );
        }

        if ( !submit_form ) {
            event.preventDefault();
        }
    });
});