JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
<form id='depositForm'>
<table>
<tr>
<td>
</td>
<td>
Total: $<input name='fullAmount' id='fullAmount' type="text">
</td>
</tr>
<tr>
<td>
<a href='#' id='add'>Add</a>
</td>
<td>
<p>Deposit Amount</p>
</td>
</tr>
<tr>
<td></td>
<td>$<input name='amount_0' type='text' id='amount_0'/></td>
</tr>
</table>
</form>
CSS
TABLE
{
border-width: 2px;
border-spacing: 2px;
border-style: outset;
border-color: #335EB1;
border-collapse: separate;
margin: 0 auto;
height: 0px;
}
TR
{
border-width: 1px;
padding: 32px 1px 1px;
border-style: inset;
border-color: #808080;
background-color: #FFFFFF;
-moz-border-radius: 0;
border-top: 0px solid #000000;
}
TD
{
padding: 1px;
border-style: inset;
border-color: #808080;
background-color: #FFFFFF;
-moz-border-radius: 0;
}
JavaScript
$(document).ready(function() {
var i = 1;
//from: http://docs.jquery.com/Plugins/Validation/Validator/addMethod
jQuery.validator.addMethod("depositsSum", function(value, element, params)
{
var tot=0;
alert(5);
for (var key in params) tot+= params[key];
return this.optional(element) || value == tot;
}, jQuery.format("Individual deposits must add to the total!"));
$("#depositForm").validate({
rules: {fullAmount: {depositsSum: [/*what goes here?*/]}}
//i also want the validation to fire when the individual deposits are modified...
//but, these fields are dynamic (add and remove), how to add rules like this for fields that are unpredictable?
});
$('#add').live('click', function()
{
$("table").append("<tr id='row_"+i+"'><td>Remove</td><td>$<input type='text' name='amount_"+i+"' id='amount_"+i+"'/></td></tr>");
i++;
return false;
});
});