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>
                               ...

JavaScript

$(document).ready(function() {

    //First validate the form
    $.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");  
        $("#formNewShip").validate({
            addValidClassOnAll: true,
            rules: {
                states: {
                    requiredState: true
                },
                color: {

                    requiredColor: true
                },
                size: {

                    requiredSize: true
                }
            },
            onError: function() {
                console.log('Form Validation failed');
                return false;
            },
            onSuccess: function() {
                console.log('Form is valid!');
                return true; //Return False Will stop the submission of the form
            }
        });

          

    });