JSFiddle - React, Tailwind, and code Playground
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%">
<div id="errorDiv" ></div>
<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" name="selectedItems" value="NA245852"/>
</td>
<td align="center">
<input type="text" name="mileage_NA245852" value="" disabled="true"/></td>
</tr>
<tr>
<td align="center">
<input type="checkbox" name="selectedItems" value="XA245852"/>
</td>
<td align="center">
<input type="text" name="mileage_XA245852" value="" disabled="true"/></td>
</tr>
<tr>
<td align="center">
<input...
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
$(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.attr("name") == "selectedItems") {
//Add Code to append the error message to a predefined element
$("#errorDiv").html("");
$("#errorDiv").append("Select at least one vehicle");
} else {
error.insertAfter(element);
}
},
rules: {
avgTime:{
required:true,
number:true
},
selectedItems:{
required:true
},
Date:{
required:true,
date:true
}
},
submitHandler: function(form) {
$("#errorDiv").html("");
form.submit();
}
});
});