JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<table id="master_table" border="0">
        <tr>
            <th>COL1</th>
            <th>COL2</th>
            <th>COL3</th>
            <th>COL4</th>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                <input type="text" name="col1" class="col1" />
            </td>
            <td>
                <input type="text" name="col2" class="col2" />
            </td>
            <td>
                <input type="text" name="col3" class="col3" />
            </td>
            <td>
                <input type="text" name="col4" class="col4" />
            </td>
            <td>
                <input type="button" name="addRow" class="add" value='Add' />
            </td>
            <td>
                <input type="button" name="removeRow" class="removeRow" value='Delete' />
            </td>
        </tr>
        <tr>
            <td colspan="4" align="center">
                <input type="submit" name="submit_data" class="submit" value="Submit" onclick="return myFunction()" />
            </td>
        </tr>
    </table>

CSS

.error{
  background:red;
  }

JavaScript

function myFunction() {
    var tableVal=$("table td").closest("#master_table")
    $(tableVal.prop('elements')).each(function(){
        var missing= $(this).val()===""
        $(this).parent().toggleClass('error',missing)
    })
    return tableVal.find(".error").length==0
}