JSFiddle - React, Tailwind, and code Playground

by aramk

HTML

<input id="some" class="required" name="some" type="text" value="" />
<input id="submit_btn" type="submit" value="Go!" />

CSS

.required {
    background: yellow;
    color: black;
}

.invalid {
    background: red;
    color: white;
}

JavaScript

$(document).ready(function() {
    
    $('#submit_btn').click(function() {
        // initialize validator for a bunch of input fields
        var valid = true;
        var inputs = $("input.required").each(function() {
            var input = $(this);
            // Check all required fields
             if (input.val() === '') {
                input.addClass('invalid');
                valid = false; // Avoid a submit
                alert("Required Fields not completed"); 
             } else if (input.hasClass('invalid')) {
                 input.removeClass('invalid');
             }
        });
        if (valid) {
            // This will submit
            alert('submit successful');
        } else {
            return false;
        }
    });

}
);