JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<form class="validate" enctype="multipart/form-data" method="post" action="ajax_studentPayments.asp?task=add&studentID=1043" id="ftblPaymentsadd" name="ftblPaymentsadd" >
<div class="modal-header noprint"> <a data-dismiss="modal" class="close">×</a>
<h3>Add Payment</h3>
</div>
<div class="modal-body">
<input type="hidden" value="A" name="a_add">
<input type="hidden" value="1043" name="x_studentID">
<input type="hidden" value="4000000" name="EW_Max_File_Size">
<table class="table table-striped">
<tbody><tr>
<td class="ewTableHeader"><span>Payment Amount <span class="ewmsg">*</span></span></td>
<td class="ewTableAltRow">
<select title=" " class="span3 required valid" id="x_paymentCurrency" name="x_paymentCurrency" aria-required="true">
<option selected="selected" value="USD">USD</option>
<option value="CAD">CAD</option>
<option value="AUD">AUD</option>
<option value="GBP">GBP</option>
<option value="EURO">EURO</option>
<option value="NIS">NIS</option>
</select> <input type="text" value="" title=" " class="span4 required valid" id="x_paymentAmount" name="x_paymentAmount" aria-required="true"></td>
</tr>
<tr>
<td class="ewTableHeader"><span>Received Date <span class="ewmsg">*</span></span></td>
<td class="ewTableAltRow">
<input value="4 Mar, 2015" title=" " class="span7 datepicker" id="x_dateReceived" name="x_dateReceived" ></td></tr>
<tr>
<td class="ewTableHeader"><span>Payment Date <span class="ewmsg">*</span></span></td>
<td class="ewTableAltRow"><span id="cb_x_dateEffective">
<input type="text" value="4 Mar, 2015"...
JavaScript
$(".validate").validate();
$('.datepicker').datepicker({autoclose: true, dateFormat: "d M, yy"});