JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<form action="#" method="post">
    <input type="text" value="input here" class="textInput" />
    <input type="text" value="input here" class="textInput" />
    <input type="text" value="input here" class="textInput" />
    <input type="text" value="input here" class="textInput" />
    <input type="submit" class="submit" value="Submit" />
</form>

CSS

.textInput {
    border:1px solid #ccc;
    outline:none;
}

JavaScript

$(".submit").click(function (e) {
    e.preventDefault();
    var empties = $('.textInput').css('border-color', '#ccc').filter(function () {
        return !this.value;
    }).css('border-color', 'red');
    if (empties.length) {
        alert('please fill out the red-boxes');
    }
});