Validation on Dropdown in MVC#.

2 posts, 0 answers
  1. umesh
    umesh avatar
    2 posts
    Member since:
    Sep 2012

    Posted 10 Sep 2012 Link to this post

    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..
  2. Mk
    Mk avatar
    12 posts
    Member since:
    Aug 2012

    Posted 10 Sep 2012 Link to this post

    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. myname@example.net"
                    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>
  3. Kendo UI is VS 2017 Ready
Back to Top