onreadystatechange不提交表单或总是提交表单

I want my input email address to be checked on registration page. I am right now using onreadystatechange to get the response from database with responseText. If responseText is true, then do not submit the form, otherwise, submit. However, my code will always submit my forms even if the condition is true.

//////////////HTML file//////////////////

<form action="regist.php" method="post" id="submitForm">
  <label>*Email:</label>
  <label class="validate" id="emailError">XXXX@XXXX.XXX</label></br>
  <input type="text" id="email" name="email"/></br>
  <label>*First Name:</label>
  <label class="validate" id="firstnameError">Letters only!</label>
  <input type="text" id="firstname" name="firstname"/></br>
  <label>Last Name:</label>
  <input type="text" id="lastname" name="lastname"/></br>
  <label>*Password:</label>
  <label class="validate" id="passwordError">at least 6 characters!</label>
  <input type="password" id="password" name="password"/></br>
  <label class="validate" id="used">Email has been used!</label></br>
  <button id="Validate">Register</button>
</form>

////////////////////JS file////////////////

$(document).ready(function () {
  $("#regi").click(function () {
    var popup = $("#register").dialog({modal: true});
    popup.show();
  });
  $("#Validate").click(function () {
    validate();
  });
});

function validate() {
  var email = document.getElementById("email").value;
  var error = $("#used");
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "backend.php?req=checkDuplicate&user=" + email, true);
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      if (xmlhttp.responseText == 1) {//check if email existed in db, return 1
        error.show();
        console.log("find match! Do not proceed!!");
        $('#submitForm').submit(false);
      }
      else {
        error.hide();
        console.log("Redirect");
        $('#submitForm').submit(true);//only here should do redirect
      }
    }
  }
  xmlhttp.send();
}

First of all, you should read some documentation about jQuery submit.

function validate() {
var email = document.getElementById("email").value;
var error = $("#used");
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "backend.php?req=checkDuplicate&user=" + email, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  if (xmlhttp.responseText == 1) {//check if email existed in db, return 1
    error.show();
    console.log("find match! Do not proceed!!");

    // if you don't want to proceed just don't call submit !
    // $('#submitForm').submit(false);
  }
  else {
    error.hide();
    console.log("Redirect");
    //$('#submitForm').submit(true);//only here should do redirect
    // remove the true value using jQuery to trigger the submit
      $('#submitForm').submit();
  }
 }
}
xmlhttp.send();
}

Using jQuery.get you can have same result with that :

  function validate() {

    var email = $("#email").val();
    var error = $("#used");
    var url = "backend.php?req=checkDuplicate&user=" + email; 

      $.get(url , function( data ){

        if(data===1){

          error.show();
          console.log("find match! Do not proceed!!");

        }else{

          error.hide();
          console.log("Redirect");
          $('#submitForm').submit()

        }

      });
  }

I hope this will help you.