JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
    <input type="text" id="texto" />
    <br />
    <div id="erro">O campo acima deve ser preenchido!</div>
    <input type="submit" />
</form>

CSS

#erro {
    display: none;
    border: 1px solid red;
    background: #f55;
}

JavaScript

var form = document.getElementById("form");

form.addEventListener("submit", function() {
    var texto = document.getElementById("texto");
    var erro = document.getElementById("erro");
    if (!texto.value.length) {
        erro.style.display = "block";                
        event.preventDefault();
        return false;
    } else {
        erro.style.display = "none";
        return true;
    }
});