JSFiddle - React, Tailwind, and code Playground

by Superman

HTML

<form action="#" method='get'>
    <table>    
        <tr>
            <td>Label</td>
            <td><input type='text' /></td>
        </tr>
        <tr>
            <td>Label</td>
            <td><input type='text' /></td>
        </tr>
        <tr>
            <td>Label</td>
            <td><input type='text' /></td>
        </tr>
    </table>
    
    <input type="submit">
</form>

CSS

td.ok { background: green; }
td.error { background: red; }

JavaScript

//form validation
$(document).ready(function() {
    $("form").submit(function(e) {
        // need var here to set the scope of 'error' to this function
        var error = false;

        $("input:text").each(function(index) {
            // calculate these beforehand:
            var $this = $(this),
                $elem = $this.parent().prev();

            if ($this.val().length < 3) {
                $elem.removeClass('ok').addClass('error');
                error = true;
                e.preventDefault(); // stop the form submit
            } else {
                $elem.removeClass('error').addClass('ok');
            }
        });


        if (error) {
            alert("Please check the fileds marked with RED.");
        }
        return !error;
    });
});