Validation on Dropdown in MVC#.

[umesh]

validation on dropdownlist not working. I want to show also validation summary on the top of the form. please give me any suggestion. i think the validation summary is not available in kendo ui. i want to show all validation messages on the top of form..

[Mk]

Try this


<script type="text/javascript">
    $(document).ready(function () {
        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();
        });
    });
</script>
<div id="tickets">
    <h3>
        Book Tickets</h3>
    <div>
        <ul>
            <li><span class="k-invalid-msg" data-for="FirstName"></span></li>
            <li> <span class="k-invalid-msg" data-for="LastName"></span></li>
            <li><span class="k-invalid-msg" data-for="Email"></span></li>
        </ul>
    </div>
    
    <br />
   
    <br />
    
    <br />
    <ul>
        <li>
            <label for="email" class="required">
                Email</label>
            <input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. [e-mail]"
                required />
           
            <label for="FirstName" class="required"> FirstName</label>
            <input id="FirstName" name="FirstName" required />
            <br />
            <label for="LastName" class="required">
                LastName</label>
            <input id="LastName" name="LastName" class="k-textbox" required />
        </li>
        <li class="accept">
            <button class="k-button" type="submit">
                Submit</button>
        </li>
        <p class="status">
        </p>
    </ul>
</div>
<style>
    .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;
    }
</style>