JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<div class="well">
    <h3>Form Error Example</h3>
<form>
    <input type="text" class="form-control" required/>
    <input type="text" class="form-control" required/>
    <input type="text" class="form-control" required/>
    <input type="text" class="form-control" required/>
    <input type="email" class="form-control" required/>
    <input type="text" class="form-control" />
        <button type="submit" class="btn"> Submit </button>
</form>
    </div>

SCSS

.form-control {
    margin-bottom: 5px;
    &[touched]:focus:invalid {
        box-shadow: 0 1px 1px #f55 inset, 0 0 8px #f55;
        outline: 0 none;
    }
    &[touched]:invalid {
        border: 1px solid #f55;
    }

}

JavaScript

$(".form-control").on('focus', function () {
        $(this).attr('touched', true);
    });