JSFiddle - React, Tailwind, and code Playground

by valchev

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 data-role="view" id="foo" data-init="onInit">
    <ul id="loginform" data-role="listview" data-style="inset">
        <li>
            <label for="username">
                Foo
            <input type="text" name="username" id="username" class="k-input" required />
            </label>
        </li>
        <li>
            <label for="password">
                Bar
            <input type="password" name="password" id="password" class="k-input" required />
            </label>
        </li>
         <li>
            <label for="email">
                Bar
            <input type="email" name="email" id="email" class="k-input" required />
            </label>
        </li>

    </ul>
    <a data-role="button" data-click="onClick">Log in</a>
</div>

JavaScript

var app = new kendo.mobile.Application(document.body),
    validator;

function onInit() {
    validator = $("#loginform").kendoValidator().data("kendoValidator")
}

function onClick(e) {
    if (validator.validate()) {
        var username = $("#username").val(),
            pass = $("#password").val(),
            data = {
                "username": username,
                "password": pass
            };
        alert("valid");
        
        /* Perform an Ajax request
        $.ajax({
            url: "/your-url",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(data),
            success: function(response) {
                //do something 
            },
            error: function(err) { 
                //do something 
            }                
        });
        */
    }
}