JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
    <div id="myForm">
        <input type="text" name="firstName" /></br>
        <input type="text" name="lastName" /></br>
        <input type="text" name="age" /></br>
        <button id="save" type="button">Save</button>
        <button id="newValidation" type="button">More</button>
    </div>

JavaScript

$(document).ready(function() {

    $("#save").on("click", function() {
        clearValidators("#myForm");
        var validators = createValidators("#myForm", {
            firstName: "First name is already taken",
            lastName: "The server does not like your last name",
            age: "You are too old"
        });
        var i = 0;
        for (i = 0; i < validators.length; i++) {
            validators[i].validate();
        }
    });

    $("#newValidation").on("click", function() {
        clearValidators("#myForm");
        var validators = createValidators("#myForm", {
            lastName: "I just don't like your last name",
            age: "Now you are too young"
        });
        var i = 0;
        for (i = 0; i < validators.length; i++) {
            validators[i].validate();
        }
    });
});

function clearValidators(selector) {
    $(selector).find("span.k-tooltip-validation").hide();
}

function createValidators(formSelector, dictionary) {
    dictionary = dictionary || {};
    var validators = [],
        inputSelector, validator;

    function accessor(val){
        return function(){ return val; };
    }
    
    for (var propName in dictionary) {

        if (dictionary.hasOwnProperty(propName)) {

            console.log("Creating validator for: " + propName);

            inputSelector = formSelector + " input[name=" + propName + "]";

            console.log("Using selector: " + inputSelector);
            
            var acc = accessor(dictionary[propName]);

            validator = $(inputSelector).kendoValidator({
                rules: {
                    custom: function() {
                        return false;
                    }
                },
                messages: {
                    custom: function(){
                        return acc();
                    }
                }
            }).data("kendoValidator");

            validators.push(validator);
        }
    }

    return validators;
}