JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<center>
    <form id="form1" name="form1" method="post" action="">
        <fieldset style="width: 90%">
            <legend></legend>
            <table width="90%" align="center" border="1"> 
                <tr >
                    <td align="left" class="uno" width="40%">Avg time</td>
                    <td align="left">
                        <input name="avgTime"  id="avgTime" type="text" size="25" value="" />
                    </td>
                </tr>
                <tr>
                    <td align="left" class="uno" width="40%">Date</td>
                    <td align="left">
                        <input name="Date"  id="Date" type="text" size="25" value="" />
                    </td>
                </tr>
                
            </table>  
        </fieldset>
        <br/><br/><br/>
        <fieldset style="width: 90%">  
            <table width="100%" border="1" align="center" cellpadding="2" cellspacing="1">
                <thead>
                    <tr class="tableheader">
                        <td width="15%"></td>
                        <td width="15%">Vehicle</td>
                        <td width="35%">Driver</td>
                        <td width="35%">Mileage</td>
                    </tr>
                </thead>
                <tbody> 
                    <tr>
                        <td align="center">
                            <input type="checkbox" class="one_required" name="selectedItems" value="NA245852"/>                                        
                        </td>
                        <td align="left">NA245852</td>
                        <td align="left">FRAN  PEREZ   PEREZ</td>
                        <td align="center">
                            <input type="text" name="mileage_NA245852"...

CSS

label { float: left; font-family: Arial, Helvetica, sans-serif;}
br { clear:  both; }
input { border: 1px solid black;}
input.error{ border: 1px solid red; }
label.error {   
    margin-left: .5em;
    float: left;
    color: red;
}   

td.uno{
    background-color: #226EAD ;
    color: white;
    font-weight:bold ;
    height:23px;
    text-indent: 12px;
}

tr.tableheader{
    background-color: #226EAD ;
    color: white;
    font-weight:bold ;
    text-align: center;
    height:23px;
}

JavaScript

$.validator.addMethod("one_required", function() {
    return $("#form1").find(".one_required:checked").length > 0;
}, 'Please select at least one vehicle.');

$(document).ready(function() {
    $("input[name=selectedItems]").change(function() {
        var me = $(this);
        var scoper = me.parent().parent();
        var otherInputs = $("input[name^=mileage]", scoper);
        otherInputs.attr("disabled", !this.checked);
        otherInputs.attr("value", "");
        if (this.checked) {
            otherInputs.addClass('required number');
        }
        else {
            otherInputs.removeClass("required number");
        }
    });
    $("#Date").datepicker();
    $("#form1").validate({
        errorPlacement: function(error, element) {
            if ($(element).hasClass("one_required")) {
                error.insertAfter($(element).closest("table"));
            } else {
                error.insertAfter(element);
            }
        },
        rules: {
            avgTime: {
                required: true,
                number: true
            },
            Date: {
                required: true,
                date: true
            }

        },
        submitHandler: function(form) {
            $("#errorDiv").html("");
            form.submit();
        }

    });

});