JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://leafletjs.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css">
<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://localhost:8015/kendo.web.js"></script>
 <div id="test">
    <div id="map"></div>
     <input name="spatialSearch" hidden="true"/>
</div>     

<input type="button" value="validate" onclick="kvalidate()">

CSS

body {
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
    font-family: arial, sans-serif;
    margin: 5px;
}
#map {
    margin-top: 10px;
    height: 400px;
}

JavaScript

window.kvalidate  = function()
{
    $("#test").kendoValidator({
                validateOnBlur: false,
                
                rules: {

                 spatialValidation: function (input)
                    {
                        
                                                return true;
                    }


                },
                messages: {
                    spatialValidation: "Select area on  map."

                }
            });
      


var obj = $("#test").data("kendoValidator");

obj.validate();



};

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
    map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
    draw: {
        position: 'topleft',
        polygon: {
            title: 'Draw a sexy polygon!',
            allowIntersection: false,
            drawError: {
                color: '#b00b00',
                timeout: 1000
            },
            shapeOptions: {
                color: '#bada55'
            },
            showArea: true
        },
        polyline: {
            metric: false
        },
        circle: {
            shapeOptions: {
                color: '#662d91'
            }
        }
    },
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;
    
    if (type === 'marker') {
        layer.bindPopup('A popup!');
    }
    
    drawnItems.addLayer(layer);
});

map.on('draw:edited', function (e) {
    // Update db to save latest changes.
    var layers = e.layers;
    
    layers.eachLayer(function(layer) {
        $('#info').html(layer.getLatLngs().toString());
    });
});