Kendo UI 必输验证出现部分选项不显示的问题

做了好几年的EBS的二次开发，最近转到WEB开发去了，终于有一种跟世界接上轨的感觉，新项目有用到kendo ui这个前端框架，简单的看了几篇菜鸟入门教程，就上手撸代码，复制粘贴撸的飞起，本着啥不会就百度的原则。刚好要加验证，就翻官方教程，不幸粗心大意给自己挖了坑。
先贴一下官方的例子连接 https://demos.telerik.com/kendo-ui/validator/index

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

    <div id="example">
    <div class="demo-section k-content">
    <div id="tickets">
        <form id="ticketsForm">
            <ul id="fieldlist">
                <li>
                    <label for="fullname" class="required">Your Name</label>
                    <input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" style="width: 220px;" />
                </li>
                <li>
                    <label for="search" class="required">Movie</label>
                    <input type="search" id="search" name="search" required validationMessage="Select movie" style="width: 220px;" /><span class="k-invalid-msg" data-for="search"></span>
                </li>
                <li>
                    <label for="date" class="required">Date</label>
                    <input type="text" id="date" name="date"
                           min="5/6/2017" data-max-msg="Enter date after '5/6/2017''"
                           pattern="\d+\/\d+\/\d+" validationMessage="Enter full date"
                           style="width: 220px;" /><span class="k-invalid-msg" data-for="date"></span>
                </li>
                <li>
                    <label for="time">Start time</label>
                    <select name="time" id="time" required data-required-msg="Select start time" style="width: 220px;" >
                        <option>14:00</option>
                        <option>15:30</option>
                        <option>17:00</option>
                        <option>20:15</option>
                    </select>
                    <span class="k-invalid-msg" data-for="time"></span>
                </li>
                <li>
                    <label for="amount">Amount</label>
                    <input id="amount" name="Amount" type="text" min="1" max="10" value="1" required data-max-msg="Enter value between 1 and 10" style="width: 220px;" />
                    <span class="k-invalid-msg" data-for="Amount"></span>
                </li>
                <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 data-email-msg="Email format is not valid"  style="width: 220px;"/>
                </li>
                <li>
                    <label for="tel" class="required">Phone</label>
                    <input type="tel" id="tel" name="tel" class="k-textbox" pattern="\d{10}" placeholder="Enter a ten digit number" required
                        validationMessage="Enter at least ten digits" style="width: 220px;" />
                </li>
                <li  class="accept">
                    <label>Terms of Service</label>
                    <input type="checkbox" name="Accept" required validationMessage="Acceptance is required" /> <p>I accept the terms of service.</p>
                </li>
                <li class="confirm">
                    <button class="k-button k-primary" type="submit">Submit</button>
                </li>
                <li class="status">
                </li>
            </ul>
        </form>
    </div>
    </div>

        <style>
            #fieldlist {
                margin: 0;
                padding: 0;
            }

            #fieldlist li {
                list-style: none;
                padding-bottom: .7em;
                text-align: left;
            }

            #fieldlist label {
                display: block;
                padding-bottom: .3em;
                font-weight: bold;
                text-transform: uppercase;
                font-size: 12px;
                color: #444;
            }

            #fieldlist li.status {
                text-align: center;
            }

            #fieldlist li .k-widget:not(.k-tooltip),
            #fieldlist li .k-textbox {
                margin: 0 5px 5px 0;
            }

            .confirm {
                padding-top: 1em;
            }

            .valid {
                color: green;
            }

            .invalid {
                color: red;
            }

            #fieldlist li input[type="checkbox"] {
                margin: 0 5px 0 0;
            }

            span.k-widget.k-tooltip-validation {
                display; inline-block;
                width: 160px;
                text-align: left;
                border: 0;
                padding: 0;
                margin: 0;
                background: none;
                box-shadow: none;
                color: red;
            }

            .k-tooltip-validation .k-warning {
                display: none;
            }
        </style>

        <script>
            $(document).ready(function() {
                var data = [
                "12 Angry Men",
                "Il buono, il brutto, il cattivo.",
                "Inception",
                "One Flew Over the Cuckoo's Nest",
                "Pulp Fiction",
                "Schindler's List",
                "The Dark Knight",
                "The Godfather",
                "The Godfather: Part II",
                "The Shawshank Redemption"
                ];

                $("#search").kendoAutoComplete({
                    dataSource: data,
                    separator: ", "
                });

                $("#time").kendoDropDownList({
                    optionLabel: "--Start time--"
                });

                $("#amount").kendoNumericTextBox();

                $("#date").kendoDateInput();

                var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
                status = $(".status");

                $("form").submit(function(event) {
                    event.preventDefault();
                    if (validator.validate()) {
                        status.text("Hooray! Your tickets has been booked!")
                            .removeClass("invalid")
                            .addClass("valid");
                    } else {
                        status.text("Oops! There is invalid data in the form.")
                            .removeClass("valid")
                            .addClass("invalid");
                    }
                });
            });
        </script>
    </div>

看上去很简单，在input 标签里加上两个属性
* required validationMessage=”Select movie” *

之后在script 标签里声明一下
var validator = $(“#ticketsForm”).kendoValidator().data(“kendoValidator”),
在保存之前触发一下验证
validator.validate()
然后尴尬的事情就发生了，发现部分输入框验证有效。。。。。。另一部分没啥反应，还有的会有串行现象，仔细看了一下上面的代码之后，发现 name 属性是要写的，由于页面存在太多的复制粘贴的代码，有得就没有写name…….

小记一下纯粹是为了鞭策自己复制粘贴要仔细一点，哈哈哈。