k-validator dropDown

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="tickets">
    <h3>Book Tickets</h3>
    <ul>
        <li>
            <label for="email" class="required">Email</label>
            <input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. [email protected]"  required />
            <br />
            <label for="FirstName" class="required">FirstName</label>
            <input id="FirstName" name="FirstName" required/>
            <span class="k-invalid-msg" data-for="FirstName"></span>
            <br />
            <label for="LastName" class="required">LastName</label>
            <input id="LastName" name="LastName" class="k-textbox" required/>
            <span class="k-invalid-msg" data-for="LastName"></span>
        </li>

        <li  class="accept">
            <button class="k-button" type="submit">Submit</button>
        </li>
        <p class="status"></p>
    </ul>
</div>

CSS

.k-textbox {
    width: 11.8em;
}

#tickets {
    width: 510px;
    height: 323px;
    margin: 30px auto;
    padding: 10px 20px 20px 170px;
}

#tickets h3 {
    font-weight: normal;
    font-size: 1.4em;
    border-bottom: 1px solid #ccc;
}

#tickets ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#tickets li {
    margin: 10px 0 0 0;
}

label {
    display: inline-block;
    width: 90px;
    text-align: right;
}

.required {
    font-weight: bold;
}

.accept, .status {
    padding-left: 90px;
}

.valid {
    color: green;
}

.invalid {
    color: red;
}
span.k-tooltip {
    margin-left: 6px;
}

JavaScript

var validator = $("#tickets").kendoValidator().data("kendoValidator");
            
$("button").click(function() {
    if (validator.validate()) {
        $(".status").text("Hooray! Your tickets has been booked!").addClass("valid");
        } else {
        $(".status").text("Oops! There is invalid data in the form.").addClass("invalid");
    }
});

var data = [
    {name: "Name1", value: 1},
    {name: "Name2", value: 2},
    {name: "Name3", value: 3}
];

$("#FirstName").kendoDropDownList({
    dataTextField: "name",
    dataValueField: "value",
    optionLabel: "Select Name",
    dataSource: {
        data: data   
    }
});

$("span.k-dropdown").focusout(function(){
    validator.validate();
});