JSFiddle - React, Tailwind, and code Playground

by Gabriel Tran

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-bind="value: Age" />

JavaScript

ko.extenders.friendlyName = function (obs, options) {
    obs.friendlyName = options;
}

function PersonModel() {
    var self = this;
    self.Age = ko.observable(3).extend({ friendlyName: "My Age" }).extend({
        number: true
    });

    self.DateOfBirth = ko.observable({
        date: true
    });
    self.Validate = function () {
        if (!self.isValid()) {
            self.errors.showAllMessages();
            return false;
        }
        return true;
    }
}

var originalValidationMessageUpdate = ko.bindingHandlers.validationMessage.update;
ko.bindingHandlers.validationMessage.update = function (element, valueAccessor, allBindingAccessor, viewModel, bindingContext) {
        if (originalValidationMessageUpdate)
            originalValidationMessageUpdate(element, valueAccessor, allBindingAccessor, viewModel, bindingContext);
        var prepend = (ko.isObservable(valueAccessor()) && valueAccessor().friendlyName)
                        ? valueAccessor().friendlyName + " - "
                        : "";
            
        $(element).html(prepend + $(element).html());
    }


ko.validation.init({
    grouping: {
        deep: true,
        observable: true
    },
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true
});

ko.applyBindings(ko.validatedObservable(new PersonModel()));