Question

HTML5验证无法在Kendo ui Numeric文本框中使用。请在下面的链接中找到在线示例。

我收到以下错误（请找到屏幕截图）。

如何解决此错误？

Answer 1

这是working的方式。您可能需要使用您的设计。

您必须为表单提供ID

<form id="ticketsForm">

你必须实施验证

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

您尚未实施表单提交功能。

            $("form").submit(function(event) {
                event.preventDefault();
                if (validator.validate()) {
                   // your Code here
                } else {
                   // Your code here
                }
            });

完整代码是：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/numerictextbox/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<form id="ticketsForm">
        <div id="example">
            <div id="add-product" class="demo-section k-header">
                <p class="title">Add new product</p>
                <ul id="fieldlist">
                    <li>
                        <label>
                            Price:
                            <input id="currency" type="number" name="currencyTextbox" min="0" max="100" style="width: 50%;" required=true />

                        </label>

                    </li>
                    <li>
                        <label>
                            Price Discount:
                            <input id="percentage" value="0.05" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Weight:
                            <input id="custom" value="2" style="width: 100%;" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Currently in stock:
                            <input id="numeric" type="number" value="17" min="0" max="100" step="1" style="width: 100%;" />
                        </label>
                    </li>
                                      <li class="status">
                    </li>
                </ul>
            </div>
<input type="submit"/>
<form>
            <script>
                $(document).ready(function() {
                    // create NumericTextBox from input HTML element
                    $("#numeric").kendoNumericTextBox();

                    // create Curerncy NumericTextBox from input HTML element
                    $("#currency").kendoNumericTextBox({
                        format: "c",
                        decimals: 3
                    });

                    // create Percentage NumericTextBox from input HTML element
                    $("#percentage").kendoNumericTextBox({
                        format: "p0",
                        min: 0,
                        max: 0.1,
                        step: 0.01
                    });

                    // create NumericTextBox from input HTML element using custom format
                    $("#custom").kendoNumericTextBox({
                        format: "#.00 kg"
                    });
                                      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>

            <style>
                .demo-section {
                    padding: 0;
                }

                #add-product .title {
                    font-size: 16px;
                    color: #fff;
                    background-color: #1e88e5;
                    padding: 20px 30px;
                    margin: 0;
               }

               #fieldlist {
                   margin: 0 0 -1.5em;
                   padding: 30px;
               }

               #fieldlist li {
                   list-style: none;
                   padding-bottom: 1.5em;
               }

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

            </style>

        </div>


</body>
</html>

HTML5验证无法在Kendo ui Numeric tetxbox中使用

1 个答案: