username_validation_no_dom_effects.js

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

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

    const response = await fetch(`/api/checkusername/${username}`); // returns { available: true | false }
    const { available } = await response.json();
    if (!available) {
        return { valid: false, reason: `Username is already taken` };
    }

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

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

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