JSFiddle - React, Tailwind, and code Playground

by Grainier Perera

HTML

<form method="post" action="login.php" onsubmit="return validateForm();">
        <label>Username</label>
        <input id="username" name="username" type="text" onkeyup="return validateUserName();" />
        <span id="usernameInfo"></span>

        <label>Password</label>
        <input id="password" name="password" type="password" onkeyup="return validatePassWord();" />
        <span id="passwordInfo"></span>

        <br />
        <input type="submit" id="submit" name="submit" />
        <span id="finalInfo"></span>
    </form>

CSS

form label {display:block; margin-top:5px;margin-left:3px;font:12px Arial;color:gray;}
        form input {width:200px;padding:5px;display:inline-block; margin-top:5px;}
        #submit {padding:7px;background-color:#f7af38;     border:#f7af38;width:215px;display:inline-block;margin-top:15px;font:11px Tahoma;color:black;}
        #usernameInfo {display:inline-block; font:italic 12px Arial; color:gray;}
        #passwordInfo {display:inline-block; font:italic 12px Arial; color:gray;}
        #finalInfo {font:italic 12px Arial; margin-left:5px;}

JavaScript

document.getElementById('usernameInfo').innerHTML = "Please type your username!";
    document.getElementById('passwordInfo').innerHTML = "Please type your password!";

    function validateUserName()
    {
        var username = document.getElementById('username');
        var usernameInfo = document.getElementById('usernameInfo');

        if(username.value.length < 4){
            usernameInfo.style.color='red';
            usernameInfo.innerHTML = "At least 4 characters!";
            return false;
        }
        else{
            usernameInfo.style.color='gray';
            usernameInfo.innerHTML = "Please type your username!";
            return true;
        }
    }

    function validatePassWord()
    {
        var password = document.getElementById('password');
        var passwordInfo = document.getElementById('passwordInfo');

        if(password.value.length < 6){
            passwordInfo.style.color='red';
            passwordInfo.innerHTML = "At least 6 characters!";
            return false;
        }
        else{
            passwordInfo.style.color='gray';
            passwordInfo.innerHTML = "Please type your password!";
            return true;
        }
    }

    function validateForm()
    {
        var userValid = validateUserName();
        var passValid = validatePassWord();
        return userValid && passValid;
    }