<table class=“uikit-table item-table-form”>
<thead> <tr> <th>Date</th> <th>Item number</th> <th>Amount</th> </tr> </thead> <tbody> {% for i in (1..3) %} {% capture group_number %}item-group-{{i}}{% endcapture %} <tr class="item-row" data-label="Service Item" data-parsley-item-row="true" data-parsley-validate-if-empty="" > <td data-label="Date"> {% include forms/date-field.html past_date="true" parsley_group=group_number %} </td> <td data-label="Item number"> {% include forms/text-field.html pattern="^\d{1,5}$" parsley_group=group_number %} </td> <td data-label="Amount"> {% include forms/text-field.html placeholder="$" pattern="^\d+\.?(\d{1,2})?" type="number" step="0.01" parsley_group=group_number %} </td> </tr> {% endfor %} </tbody>
</table>
{% include buttons/link-button.html text=“Add another item” className=“uikit-btn–tertiary uikit-btn–block” onclick=“addRow()”%}
<script type=“text/javascript”>
var addRow = function() { var xhr = new XMLHttpRequest(); xhr.responseType = 'document'; xhr.open('GET', window.location.href); xhr.onload = function() { var tableRow = this.response.querySelector('.item-row'); var tableBody = document.querySelector('.uikit-table tbody'); tableBody.appendChild(tableRow); }; xhr.send(); } document.addEventListener("DOMContentLoaded", function(event) { window.Parsley.addValidator('itemRow', { validateString: function(value, requirement, instance) { var cells = instance.element.querySelectorAll('input'); var isFilledIn = Array.prototype.some.call(cells, function(cell) { return cell.value ? true : false }); var group = cells[0].dataset.parsleyGroup; if (isFilledIn) { return instance.parent.validate({group: group, force: true}); } return true; }, messages: { en: 'Please enter all fields for this row', } }); });
</script>