JSFiddle - React, Tailwind, and code Playground

by mark69_fnd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<body>
<div id="divErrors">
    <ul id="errors"></ul>
</div>
    
<form action="" method="get">
<input type="submit" value="Submit" tabindex="-1"/>

<table id="mainTable">
<tbody>
  <tr id="itemsHeader">
    <th>Qty</th>
    <th>Item</th>
    <th>Unit Price</th>
  </tr>
</tbody>
</table>
</form>
<script id="rowTemplate" type="text/x-handlebars-template">
  <tr class="items" id="item{{rowId}}">
    <td class="input">
        <input id="qty{{rowId}}" name="qty{{rowId}}" type="number" min="1" value="{{qty}}"  class="{{rules}}"/>
    </td><td class="input">
      <input id="id{{rowId}}" name="id{{rowId}}" type="text" value="{{id}}" class="{{rules}}"/>
    </td><td class="input">
      <input id="price{{rowId}}" name="price{{rowId}}" type="text" value="{{price}}" class="{{rules}}"/>
    </td>
  </tr>
</script>
</body>

JavaScript

$("form").validate({
    errorLabelContainer: "#errors",
    wrapper: "li",
    meta: "v",
    submitHandler: function() {
        alert('Submitted!');
    }
});

var rowTemplate = Handlebars.compile($('#rowTemplate').html());
var required = "{ v: { required:'hr' }}";
var data = [{
    rowId: 0,
    qty: 2,
    id: 'Yogi Bear',
    price: 200,
    rules: $.validator.format(required, 0)
},{
    rowId: 1,
    qty: 3,
    id: 'Yaba Daba Doo',
    price: 100,
    rules: $.validator.format(required, 1)
}];

alert(JSON.stringify(data, undefined, 2));
$('#itemsHeader').after($.map(data, rowTemplate).join(''));