Question

文本框验证失败后，点击或提交事件不会立即触发

请尝试使用此link重现此问题。

HTML：

<div id="tickets">
    <table>
        <tr>
            <td style="vertical-align:text-top;">Document Name&nbsp;*</span>
            </td>
            <td style="width:435px;">
                <input name="Name" required></input>
            </td>
        </tr>
    </table>
    <button class="k-button" id="btnSubmit">Click me</button>
</div>

JS：

 $(document).ready(function () {
     var validator = $("#tickets").kendoValidator().data("kendoValidator");

     $("#btnSubmit").click(function (event) {
         alert("Select valid value");
         event.preventDefault();
     });
 });

步骤

点击文本框
尝试单击文本框为空的按钮，显示验证正如所料。
在文本框中输入一些值
再次单击该按钮，'click'事件不会按预期触发（但在用户时工作正常）点击第二次）

每当用户需要单击提交按钮两次以在验证失败后执行操作时，这很奇怪。

我发现这种行为主要是使用文本框控件。

Answer 1

我尝试使用当前版本的Kendo UI进行重现，但无法进行。这将按预期工作（通过您的步骤，它将打印“无效”，然后“有效”）：

 $(document).ready(function () {
     var validator = $("#tickets").kendoValidator().data("kendoValidator");

     $("#btnSubmit").click(function (event) {
         if (validator.validate()) {
             console.log("valid");
         } else {
             console.log("not valid");
         }
     });
 });

（demo）

Answer 2

这是因为当您单击按钮时，验证会发生，因为validateOnBlur已打开。将Validator validateOnBlur设置为false。

http://docs.telerik.com/kendo-ui/api/framework/validator#configuration-validateOnBlur

Kendo文本框验证：单击两次问题

2 个答案: