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.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<form id="myform">
    <input name="username" required data-message="Ener a name."/> <br />
    <input type="email" name="userEmail" required data-message="My custom email message" /> <br />
    <button>Validate</button>
</form>

CSS

input {
    display: block; 
    margin: 5px;
}

JavaScript

//var validator = $(document.body).kendoValidator().data("kendoValidator");
//validator.validate();

 $("#myform").kendoValidator({
         messages: {
             // defines a message for the 'custom' validation rule
             custom: "Please enter valid value for my custom rule",

             // overrides the built-in message for the required rule
             required: function(input) {
                 return getRequiredMessage(input);
             },

             // overrides the built-in message for the email rule
             // with a custom function that returns the actual message
             email: function(input) {
                 return getMessage(input);
             }
         },
         rules: {
           custom: function(input) {
             if (input.is("[name=username]")) {
                 return input.val() === "Tom";
             }
             return true;
           }
         }
    });

    function getMessage(input) {
      return input.data("message");
    }
    function getRequiredMessage(input) {
       if (input.is("[name=username]")) {
                 return "User name is required";
             }
        else
             return input.attr("name") + " Field is Required";
    }