做了好幾年的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. 
 
[email protected]"  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…….

小記一下純粹是為了鞭策自己複製貼上要仔細一點，哈哈哈。