我想验证我的注册表上的用户输入：

<form action="../DB files/registerDB.php" onsubmit="return validateData()" method="POST">
        <div class="container">
            <br>
            <h1>Register</h1>
            <p>Please fill in this form to create an account.</p>

            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" class="form-control" id="username">
                <p id="username-error" class="error-p"></p>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" name="password" id="password">
                <p id="password-error" class="error-p"></p>
            </div>
            <div class="form-group">
                <label>Repeat Password</label>
                <input type="password" class="form-control" name="confirm_password" id="confirm_password">
                <p id="passwordrepeat-error" class="error-p"></p>
            </div>
            <br>
            <button type="submit" class="btn btn-primary">Register</button>
        </div>
        </div>

        <div class="container signin">
            <p>Already have an account? <a href="login.php">Login</a>.</p>
        </div>
    </form>
    <script>
        var isvalid = false;

        function validateData() {
            document.getElementById("username-error").innerHTML = "";
            document.getElementById("password-error").innerHTML = "";
            document.getElementById("passwordrepeat-error").innerHTML = ""
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var confirmpassword = document.getElementById("confirm_password").value;
            if (username.length < 4) {
                document.getElementById("username-error").innerHTML = "Username is too short!";
                isvalid = false;
            }
            if (password.length < 7) {
                document.getElementById("password-error").innerHTML = "Password is too short!";
                isvalid = false;
            }
            if (password != confirmpassword) {
                document.getElementById("passwordrepeat-error").innerHTML = "Passwords dont match!"
                isvalid = false;
            }
            // send request to backend
            let request = new XMLHttpRequest();
            request.open("POST", "../DB files/usernametakenDB.php", true);
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.send(`username=${username}`)

            // check answer
            request.onreadystatechange = () => {
                if (request.readyState == 4 && request.status == 200) {
                    let response = JSON.parse(request.responseText);
                    if (response.message == 403) {
                        console.log("not gud");
                        document.getElementById("username-error").innerHTML = "Username is already taken.";
                        isvalid = false;
                    } else {
                        // username not yet taken
                        console.log("validation complete");
                    }
                }

            }
            console.log(isvalid);
            return isvalid;
        }
    </script>

出于某种原因，当我用一个已经存在的用户名测试它时，它首先返回“isvalid”变量，然后验证它是否已经存在。
我想这是因为我在request.open语句中加了“true”。但是如果我输入false，我会在控制台中得到下面的消息，而它根本不会进行验证。也不归还任何东西。

有什么问题吗？