JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<div>
    <form id="theform" action="#" method="post">
    <label for="username">username</label>
    <input type="text" name="username" id="username" required >
    <input type="submit" value="Submit" id="submitter">
    </form>
</div>

CSS

input.submitted:invalid {
    border-color: red;
    box-shadow: 3px 3px 5px red;
}

JavaScript

$('#submitter').on('click', function(e) {
   $(this).parent().children().addClass('submitted');
});