JSFiddle - React, Tailwind, and code Playground

HTML

<form action="database.php" method = post>

    Username 
    <input type='text' id='un' onchange="checkname()" onkeyup="checkempty(id)" />
    <div id="name"></div><br>
    .....
</form>

JavaScript

function checkname() {
    var name = document.getElementById("un").value;
    var pattern = /^[A-Z][A-Za-z0-9]{3,19}$/;

    if (name.search(pattern) == -1) {
        document.getElementById("name").innerHTML = "wrong";
    }
    else {
        document.getElementById("name").innerHTML = "right!";
    }
}

function checkempty(id) {
    var temp = document.getElementById(id).value;

    if (!temp) {
        document.getElementById("name").innerHTML = '';
    }
}