JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
h1
{
    font-size: 14px;
    font-weight: bold;
}
h2
{
    font-size: 12px;
    font-weight: bold;
}
</style>


<div>
Run tests: <input type="button" id="run_test" value="Start">
<input type="button" id="reset" value="Reset">
</div>
<div style="clear:both;"></div>



<div id="divUnit">
</div>

 <div style="height:80px;"></div>
 <hr />
 <div id="container">
 <div id="jtc-forms-testform">
    An input: <input id="test_input" type="text" style="width:200px;" datafield
        data-validation='"required":true'
     >
     Another input: <input id="test_input2" type="text" style="width:200px;" datafield
        data-validation='"date": {"error":"test_input2 must be a date"}'
     >

     Yet another  input: <input id="test_input3" type="text" style="width:200px;" datafield
        data-validation='"display":"#test_input3_error", "date": {"required": false, "future": true }'
     >
     <span style="display:none;" id="test_input3_error">An error</span>
    <div style="clear:both;"></div>
    A select: <select style="clear:both;" id="test_select" multiple datafield>
        <option value="1">President
        <option value="2">Grand Poobah
        <option value="3">Supreme Imperial Overlord
        </select>
    A checkbox: <input type="checkbox" id="test_checkbox" datafield />
     <div style="clear:both;"></div>
     <button id="save">Save</button>
     <div id="output">
            </div>
    A label: <span datafield id="test_label"></span>
</div>
</div>

JavaScript

function appendInfo(err) {
        $("#divUnit").append($("<span></span>").html(err)).append("<br/>");
    }
    $(document).ready(function() {

        var count = jQuery("[datafield]").length;
        appendInfo("Selector [datafield]: " + count + " elements.");
        count = jQuery("[datafield='']").length;
        appendInfo("Selector [datafield='']: " + count + " elements.");

    });