How to handle syncronous calles properly in javascript/jquery

I'm making some form validation code, the code works like a charm, however when I initially sent the name and value away to be validated on the backend, I kept getting WEIRD results in my AJAX response, the usual response was that the request would duplicate if I clicked out of the window(I dont think this is an event issue...), another was that the response would be blank(as if it had processed a blank element)

So I fiddled with some xhr requests, turned async off... and it worked...

but now I get a depreciation message in my console:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/

The issue is kind of fixed... it still sends another request when I click out of the window, which I'm not sure how to fix, But I really want to make sure that I haven't painted myself in a corner by switching async off.

is there a better practice to use? PLEASE NOTE: I'm new to Javascrip and JQuery

function castJson(arr) {
    $json_object = {};

    for (var x = 0; x < arr.length; x++) {
        $json_object[arr[x].name] = arr[x].value;
    };

    return $json_object;
};

(function($) {
    $.fn.processForm = function(settings) {
      $form = $(this);
      $formData = castJson(this.serializeArray());
      $formElements = $form.find('input, select, textarea');

      $form.submit(function(e){
        e.preventDefault();
        e.stopPropagation();
      })

      if (settings.autocompleteOff) {
        $form.attr('autocomplete', 'off');
      }

      $form.find(':input').on('change input', function() {
        $errors = 0;
        run_remote_validation();

        if ($errors == 0) {
          unlock_submit();
        }
      });

      function lock_submit() {
        $form.find('button[type="submit"]').attr("disabled", true);
        $form.find('button[type="submit"]').html('Locked');
        $form.find('button[type="submit"]').removeClass('btn-outline-primary').addClass('btn-outline-danger');
      }

      function unlock_submit() {
        $form.find('button[type="submit"]').attr("disabled", false);
        $form.find('button[type="submit"]').html('Submit');
        $form.find('button[type="submit"]').removeClass('btn-outline-danger').addClass('btn-outline-primary');
      }

      function throw_bs_error(test_result) {
        $.each($formElements, function(key, ele) {
            if (ele.name == test_result[2]) {
              errorMessage = document.createElement("div");
              $(errorMessage).text(test_result[1]);
              errorMessage.classList.add('invalid-feedback');

              ele.classList.add('is-invalid');
              ele.after(errorMessage);

              $errors++;
              lock_submit();
            }
        });
      }

      function loop_elements(val_method, val_funct, val_name=null, excl=[]) {
        for(var eN = 0; eN < $formElements.length; eN++) {
          if (val_method == 'remote') {
            if (!excl.includes($formElements[eN].name) && $formElements[eN] == val_name){
              result = val_funct({name:$formElements[eN].name, value:$formElements[eN].value});
              if (result) {
                if (result[0] == false) {
                  result.push($formElements[eN].name);
                  throw_bs_error(result);
                  break;
                }
              }
            }
          }
          else if (val_method == 'local') {
            if ($formElements[eN] == val_name) {
              result = val_funct({name:$formElements[eN].name, value:$formElements[eN].value});
              if (result) {
                if (result[0] == false) {
                  result.push($formElements[eN].name);
                  throw_bs_error(result);
                  break;
                }
              }
            }
          }
        }
      }

    function run_remote_validation() {
      for(var eN2 = 0; eN2 < $formElements.length; eN2++) {
        excludes = (settings.validationExc) ? settings.validationExc : [];
        loop_elements('remote', remote_validation, $formElements[eN2], excl=excludes);
      }
    }

    function remote_validation(element) {
      if (element.name){
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 409) {
              oc = [false, JSON.parse(xhttp.responseText)['response'][element.name]];

              // if(oc[1] == 'undefined') {
              //   console.log(oc);
              //   xhttp.send(JSON.stringify({name:element.name, value:element.value}));
              // }
            }
        };
        xhttp.open("PUT", settings.validationUrl, false);
        xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhttp.send(JSON.stringify({name:element.name, value:element.value}));

        return oc;
      }
    }

  }
})(jQuery);

init code:

$( document ).ready(function() {
  $('form[name="loginForm"]').processForm({
    validationUrl: 'VALIDATION URL HERE',
    validationExc: ['remember'],
    submitUrl: 'SUBMIT URL HERE',
    autocompleteOff: true,
    stopProp: true,
    validationMethods: {
      email: function(ele){
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (re.test(String(ele.value).toLowerCase()) == false) {
          return [false, 'Email address not valid'];
        }
        else {
          return true;
        }
      }
    }
  });
});