Synchronous XMLHttpRequest on the main thread is deprecated AJAX

Question

I am having this error in my console that is preventing my validation in two different forms in AJAX Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.. My forms are working fine but this console log is bothering me.

I'll only add in code in the scripts to avoid confusion.

These are the two forms (onblur invokes the ajax validation)

edit.blade.php

<div class="main-content">

  <!-- You only need this form and the form-basic.css -->

  <form class="form-basic" method="post" id="myEditForm" action="/edit">

    <div class="form-title-row">
      <h1>Edit User</h1>
    </div>

      <input type="hidden" name="userid" id="editFormUserId">

    <div class="form-row">
      <label>
        <span>Firstname</span>
        <input type="text" name="firstname" id="editFormFirstName" onblur="validateEditForm('divfirstnameEditForm', this.value)">
      </label>
    </div>
    <div id="divfirstnameEditForm"></div>

    <div class="form-row">
      <label>
        <span>Lastname</span>
        <input type="text" name="lastname" id="editFormLastName" onblur="validateEditForm('divlastnameEditForm', this.value)">
      </label>
    </div>
    <div id="divlastnameEditForm"></div>

    <div class="form-row">
      <label>
        <span>Password</span>
        <input type="password" name="password" id="editFormPassword" onblur="validateEditForm('divpasswordEditForm', this.value)">
      </label>
    </div>
    <div id="divpasswordEditForm"></div>

    <div class="form-row">
      <input class="button" type="button"  onclick="fetchUser()" value="Submit" />
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    </div>
  </form>
</div>

create.blade.php

<div class="main-content">

  <!-- You only need this form and the form-basic.css -->

  <form class="form-basic" method="post" id="myForm" action="/create">

    <div class="form-title-row">
      <h1>Create User</h1>
    </div>

    <div class="form-row">
      <label>
        <span>Firstname</span>
        <input type="text" name="firstname" id="firstname1" onblur="validate('firstname', this.value)">
      </label>
    </div>
    <div id="firstname"></div>

    <div class="form-row">
      <label>
        <span>Lastname</span>
        <input type="text" name="lastname" id="lastname1" onblur="validate('lastname', this.value)">
      </label>
    </div>
    <div id="lastname"></div>

    <div class="form-row">
      <label>
        <span>Password</span>
        <input type="password" name="password" id="password1" onblur="validate('password', this.value)">
      </label>
    </div>
    <div id="password"></div>

    <div class="form-row">
      <input class="button" onclick="checkForm()" type="button" value="Submit" />
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    </div>
  </form>
</div>

scripts.js (contains fetchuser, checkform, validation methods for each form)

//start of checkuser
function fetchUser() {
  console.log('fetchuser');

  //fetch values from edit blade
  var firstname = document.getElementById("editFormFirstName").value;
  var lastname = document.getElementById("editFormLastName").value;
  var password = document.getElementById("editFormPassword").value;
  //Check input Fields Should not be blanks.
  if (firstname == '' || lastname == '' || password == '') {
    alert("Fill All Fields");
  } else {
    //Notifying error fields
    var firstname = document.getElementById("divfirstnameEditForm");
    var lastname = document.getElementById("divlastnameEditForm");
    var password = document.getElementById("divpasswordEditForm");
    //Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
    if (firstname.innerHTML == 'Firstname must be 2+ letters' || lastname.innerHTML == 'Lastname name must be 2+ letters' || password.innerHTML == 'Must be a combination of special character, number and letters') {
      alert("Fill Valid Information");
    } else {
      //Submit Form When All values are valid.
      document.getElementById("myEditForm").submit();
    }
  }

}

//end of checkuser

//checkform validation
function checkForm() {
  console.log('checkform');
  // Fetching values from all input fields and storing them in variables.
  var firstname = document.getElementById("firstname1").value;
  var lastname = document.getElementById("lastname1").value;
  var password = document.getElementById("password1").value;
  //Check input Fields Should not be blanks.
  if (firstname == '' || lastname == '' || password == '') {
    alert("Fill All Fields");
  } else {
    //Notifying error fields
    var firstname = document.getElementById("firstname");
    var lastname = document.getElementById("lastname");
    var password = document.getElementById("password");
    //Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
    if (firstname.innerHTML == 'Firstname must be 2+ letters' || lastname.innerHTML == 'Lastname name must be 2+ letters' || password.innerHTML == 'Must be a combination of special character, number and letters') {
      alert("Fill Valid Information");
    } else {
      //Submit Form When All values are valid.
      document.getElementById("myForm").submit();
    }
  }
}
// AJAX code to check input field values when onblur event triggerd.
function validate(field, query) {
  var xmlhttp;
  if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = "Validating..";
    } else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = xmlhttp.responseText;
    } else {
      document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
    }
  }
  xmlhttp.open("GET", "/php/validation.php?field=" + field + "&query=" + query, false);
  xmlhttp.send();
}
// AJAX code to check input field values when onblur event triggerd.
function validateEditForm(field, query) {
  var xmlhttp;
  if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = "Validating..";
    } else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = xmlhttp.responseText;
    } else {
      document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
    }
  }
  xmlhttp.open("GET", "/php/validationEditForm.php?field=" + field + "&query=" + query, false);
  xmlhttp.send();
}

Can you help me why it is showing up in my log?

Answer 1

You can either remove the last boolean value:

  xmlhttp.open("Method", "URL"); 

or just use the true:

  xmlhttp.open("Method", "URL", true);

From the docs at MDN:

An optional Boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send() method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown.