JSFiddle - React, Tailwind, and code Playground

by Sam G

HTML

<form id="mform">
    <input type="text" class="inptxt" name="it1" />
    <input type="text" class="inptxt" name="it2" />
    <input type="text" class="inptxt" name="it3" />
    <input type="text" class="inptxt" name="it4" />
    <input type="text" class="inptxt" name="it5" />
    <input type="text" class="inptxt" name="it6" />
    <input type="submit" id="sub" value="Submit" />
</form>

JavaScript

$('#mform').on('submit', function(e) {
    var allValid = true;
    e.preventDefault();
    $('.inptxt').each(function() {
        if (!$(this).isValid()) {
            $(this).css('background-color', 'red');
            allValid = false;
        }
        else
            $(this).css('background-color', 'white');
    });
    if(allValid) {
        //everything's valid
        //$(this).submit();
    }
});

$.fn.isValid = function() {
    return $.trim($(this).val());
}

$('.inptxt').on('focus', function() {
    $(this).css('background-color', 'white');
});