JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.diamondchain.com/jQuery/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://www.diamondchain.com/css/default.css">
<form action='tradeShow.php' id='tradeForm'>
<table>
    <tr>
        <th>Name of Show</th>
        <td>
            <input type='text' name='showName'></input>
        </td>
    </tr>
    <tr>
        <th>Location</th>
        <td>
            <input type='text' name='location'></input>
        </td>
    </tr>
    <td></td>
    <td>
        <input type='checkbox' name='list[]' id='infinityProduct'></input><span style='font-size: 12px;'>Guide One</span>

    </td>
    <td>
        <input type='checkbox' name='list[]' id='corrosionProduct'></input><span style='font-size: 12px;'>Guide Two</span>

    </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type='checkbox' name='list[]' id='sapphireProduct'></input><span style='font-size: 12px;'>Guide Three</span>

        </td>
        <td>
            <input type='checkbox' name='list[]' id='ovenProduct'></input><span style='font-size: 12px;'>Guide Four</span>

        </td>
    </tr>
    <tr>
        <td>
            <input type='submit' value='Go to next step'></input>
        </td>
    </tr>
</table>
</form>

JavaScript

$(document).ready(function () {
    $("#tradeForm").validate({
        rules: {
            startDate: {
                required: true,
                date: true
            },
            endDate: {
                required: true,
                date: true
            },
            showName: {
                required: true,
                minlength: 5
            },
            location: {
                required: true
            },
            'list[]': {
                required: true
            }
        },
        messages: {
            startDate: "*",
            endDate: "*"
        }
    });
});