JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<div>
    Click on inputs and look at console.<br/>
    <input size="2" maxlength="2" data-bind="value: prop1"/> is in VM context
    <div data-bind="validationOptions: {decorateInputElement: true}">
        <input size="2" maxlength="2" data-bind="value: prop2"/> context is lost
    </div>
</div>

JavaScript

ko.bindingHandlers['validationCore'] = (function () {

	return {
		init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
			var config = ko.validation.utils.getConfigOptions(element);
			var observable = valueAccessor();

			// parse html5 input validation attributes, optional feature
			if (config.parseInputAttributes) {
				ko.validation.utils.async(function () { ko.validation.parseInputValidationAttributes(element, valueAccessor); });
			}
            
			// if requested insert message element and apply bindings
			if (config.insertMessages && ko.validation.utils.isValidatable(observable)) {

				// insert the <span></span>
				var validationMessageElement = ko.validation.insertValidationMessage(element);

				// if we're told to use a template, make sure that gets rendered
				if (config.messageTemplate) {
					ko.renderTemplate(config.messageTemplate, { field: observable }, null, validationMessageElement, 'replaceNode');
				} else {
					ko.applyBindingsToNode(validationMessageElement, { validationMessage: observable });
				}
			}

			// write the html5 attributes if indicated by the config
			if (config.writeInputAttributes && ko.validation.utils.isValidatable(observable)) {

				ko.validation.writeInputValidationAttributes(element, valueAccessor);
			}

			// if requested, add binding to decorate element
			if (config.decorateInputElement && ko.validation.utils.isValidatable(observable)) {
				ko.applyBindingsToNode(element, { validationElement: observable });
			}
		}
	};

}());

// Switch value to false and click inside inputs (Check the console);
ko.validation.init({decorateInputElement: true});

function VM( ){    
    this.prop1 = ko.observable(1).extend({digit: true});
    this.prop2 = ko.observable(2).extend({digit: true});   
}

ko.applyBindings(new VM());

var elements = document.querySelectorAll('input');
for (var i = 0; i < elements.length; i++) {
    (function(el) {
        el.addEventListener('click',...