JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canjs.com/release/latest/can.jquery.js"></script>
<script src="http://canjs.com/release/latest/can.map.validations.js"></script>
<script type="text/mustache" id="validationstest">
    Foo {{data.foo}}
    <br> Baz {{data.baz}}
    <br>{{#each validator.computed_errors}}{{@key}}: {{.}}{{/each}}
</script>
    
    <div class="container"></div>
        
        
    <form id="thud">
        <input name="foo" value="bar" />
        <br><input name="baz" value="" />
    </form>

JavaScript

can.Map("DynamicFormValidator", {
    newInstance : function(data) {
        var cls = this.extend();
        can.each(data.serialize(), function(val, key) {
            cls.validatePresenceOf(key);
        });
        //cls.prototypes.data = data;
        return can.Map.newInstance.call(cls, data);
    }
}, {
    init : function(data) {
        var that = this;
        this.attr("data", data);
        this.bind("change", function(ev, attr, how, newVal) {
            if(attr.indexOf('data.') === 0) {
                that.attr(attr.substr(5), newVal);
            }
        })
    }
    , computed_errors : can.compute(function() { return this.errors(); })
});

$(function() {
    var data = new can.Map(can.deparam($("#thud").serialize()));
    var validator = new DynamicFormValidator(data);
    can.view("#validationstest", { data : data, validator : validator}, function(frag) {
        $(".container").html(frag);
    });
    
    setTimeout(function() {
        data.attr("baz", "quux");
    }, 5000);
});