JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<body>
    <div id="content3">
        <div id="content-new" class="contentShipping">
            <form id="formNewShip" class="bootstrap-frm" action="someFormProcessor.php" method="post">
                 <h1 style="float: left;">Enter your shipping address</h1>

                <div style="float: left; width: 255px;">
                    <label style="vertical-align: middle;display:none;">First Name:&nbsp;</label>
                    <input type="text" id="fname" name="fname" size="25" maxlength="20" placeholder="First Name" data-validation="alphanumeric" />
                    <br />
                </div>
                <div style="float: right; width: 255px;">
                    <label style="vertical-align: middle;display:none;">Last Name:&nbsp;</label>
                    <input type="text" id="lname" name="lname" size="35" maxlength="35" placeholder="Last Name" data-validation="alphanumeric" />
                    <br />
                </div>
                <br />
                <div style="float: left; width: 262px;">
                    <label style="vertical-align: middle;display:none;">Address:&nbsp;</label>
                    <input type="text" id="address" name="address" size="30" maxlength="45" placeholder="Address" data-validation="alphanumeric" />
                    <br />
                </div>
                <div style="float: left; width: 255px;">
                    <label style="vertical-align: middle;display:none;">Apt/Ste:&nbsp;</label>
                    <input type="text" id="aptste" name="aptste" size="15" maxlength="10" placeholder="Apt/Ste" />
                    <br />
                </div>
                <div style="float: left; width: 262px;">
                    <label style="vertical-align: middle;display:none;">City:&nbsp;</label>
                    <input type="text" id="city" name="city" size="30" maxlength="45"...

JavaScript

$(document).ready(function() {

    //First validate the form
        $('#formNewShip').validate({
            addValidClassOnAll: true,
            rules: {
                states: {
                    requiredState: true
                },
                color: {
                    requiredColor: true
                },
                size: {
                    requiredSize: true
                }
            }
        });

        $.validator.addMethod('requiredState', function(value) {
            return (value !== 'XX');
        }, "State required");
        $.validator.addMethod('requiredColor', function(value) {
            return (value !== 'select');
        }, "Please select a Color");    
        $.validator.addMethod('requiredSize', function(value) {
            return (value !== 'select');
        }, "Please select a Size");    

    });