Some options are not displayed in Kendo UI required input verification

Keywords: Web Development JQuery Attribute

After several years of EBS secondary development, I recently transferred to WEB development, and finally got a sense of connecting with the world. The new project is useful to the front-end framework of kendo ui. I simply read a few novice introductory tutorials, started rolling code, copied and pasted rolling flying, and the principle of Baidu won't be what it is. Just to add verification, I turned to the official tutorial, unfortunately carelessly dug a hole for myself.
First post the official example link 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>



It looks simple. Add two attributes to the input tag
* required validationMessage="Select movie" *

Then make a statement in the script tag
var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
Trigger validation before saving
validator.validate()
And then the embarrassing thing happened. I found that part of the input box validation was effective...... There is no response in the other part, and there will be a serial phenomenon. After a careful look at the above code, I found that the name attribute is to be written. Because there are too many copy and paste codes on the page, there is no name written .

Just to urge you to copy and paste carefully, hahaha.

Posted by kutchbhi on Tue, 31 Mar 2020 12:34:20 -0700