JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="example">
    <input id="dropdown"
        name="name"
        data-role="dropdownlist"
        data-text-field="text"
        data-value-field="value"
        data-option-label="Select an option"
        data-bind="source: dataSource, value: val"
        required />
    <span class="k-invalid-msg" ></span>
</div>
<br />
<button onclick="validate()">Validate</button>
<button onclick="onClick()">Set new reqMsg</button>

JavaScript

var viewModel = kendo.observable({
    dataSource: new kendo.data.DataSource({
        data: [
            {text: "Item1", value: 1},
            {text: "Item2", value: 2},
            {text: "Item3", value: 3}
        ]
    }),
    val: 0,
    reqMsg: " cannot be empty"
});

var validator = $("#example").kendoValidator({
    messages: {
        required: function(input) {
            var name = input.attr("name"),
                msg = viewModel.get("reqMsg");
            return name + msg;
        }
    }
}).data("kendoValidator");
    
kendo.bind($("body"), viewModel);

function validate() {
    validator.validate();
}

function onClick() {
    viewModel.set("reqMsg", " have another required message!")
}