JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div class="order-search">
    <div data-bind="text: OrderNumber.Value"></div>
    <div data-bind="text: OrderNumber.Message"></div>
    <div data-bind="text: OrderNumber.IsValid"></div>
    
    <input type="text" id="searchOrderNumber" style="width: 89px;" maxlength="10"
        data-bind="value: OrderNumber.Value"
        data-value-update="keyup" />
</div>

JavaScript

jQuery(document).ready(function ($) {
    var viewModel = kendo.observable({
        OrderNumber: (function(){
            var isValueValid = function (that) {
                return (that.get('Value').length >= 8);
            };

            return {
                Value: '',
                IsValid: function () {
                    return isValueValid(this);
                },
                Message: function () {
                    if (isValueValid(this)) {
                        return '';
                    }
                    else {
                        return 'Text length must be at least 8 characters.';
                    }
                }
            };
        })()
    });

    kendo.bind($('.order-search'), viewModel);
});