username_validation_no_network.js

async function isUsernameAvailable(username) {
    const response = await fetch(`/api/checkusername/${username}`); // returns { available: true | false }
    return (await response.json()).available;
}

async function validateUsername(username, usernameUniquenessCheckFn) {
    if (typeof username !== "string" || username.trim() === "") {
        return { valid: false, reason: "Username is needed" };
    }

    if (!username.match(/^\w+$/)) {
        return { valid: false, reason: "Username must contain characters and numbers" };
    }

    const available = await usernameUniquenessCheckFn(username);
    if (!available) {
        return { valid: false, reason: `Username ${username} is already taken` };
    }

    return { valid: true, reason: null };
};

function showError(text) {
    document.getElementById("error-text").innerText = text;
}

// Use it.
validateUsername("test", isUsernameAvailable).then(({ valid, reason }) => {
    if (!valid) {
        showError(reason);
        return;
    }
    // continue with registration    
});