JSFiddle - React, Tailwind, and code Playground

by mikiqex

HTML

<form action="" method="POST" id="formID">
    Your name: <input id="yourname" required /><span id="yournameMsg" style="margin-left:6px;color:darkred;"></span>
    <br />
    <input type="submit" />
</form>

JavaScript

var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
        if (!event.target.checkValidity()) {
            event.preventDefault(); // dismiss the default functionality
            document.getElementById('yournameMsg').innerHTML = document.getElementById('yourname').value == '' ? 'Please, fill Your name' : ''; // Show message
            document.getElementById('yourname').style.borderColor = document.getElementById('yourname').value == '' ? 'darkred' : ''; // color field's border
            if (document.getElementById('yourname').value == '') document.getElementById('yourname').focus(); // Put cursor back to the field
            //alert('Please, fill the form'); // error message
        }
    }, false);