JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JSP Page</title>
        <script>
            function v1(imgId) {
                var img = document.getElementById(imgId),
                    val = document.form1.namefield.value;
                img.src = img.alt = validateName(val) 
                    ? "OkSmall.jpg" 
                    : "NotOkSmall.jpg";
            }
        </script>
    </head>
    <body>
        <h1>Validation testing, HO!</h1>
        <form name="form1" action="submit">   
            <div id="div1">
                <input type="text" name ="namefield" id="f1" onkeyup="v1('be');" >
                <image id="be" src="NotOkSmall.jpg" alt="NotOkSmall.jpg" />
                <span id="error-message" class="invis"></span>
            </div>
            <input type="button" value="GO" onClick="v1('be');">
        </form>
    </body> 
</html>

CSS

.invis {
    display: none;
}

JavaScript

function validateName(input) {
    var res = true,
        errorMsg,
        errorContainer = document.getElementById('error-message');
    
    if(input.length < 2) {
        res = false;
        errorMsg = "Input is to short!";
    }
    
    if(input.length >= 2 && /\d/.test(input)) {
        res = false;
        errorMsg = "Name contains a number!";
    }

    if(res) {
        errorContainer.style.display = 'none';
    } else {
        errorContainer.innerHTML = errorMsg;
        errorContainer.style.display = 'inline';
    }
    
    return res;
}