Проверка текстового поля кендо: нажмите дважды

Событие щелчка или отправки не срабатывает вскоре после сбоя проверки текстового поля

Попробуйте перейти по этой ссылке, чтобы воспроизвести проблему.

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();
     });
 });

Шаги

  1. Сосредоточьтесь на текстовом поле, щелкнув по нему
  2. Попробуйте нажать кнопку с пустым текстовым полем, проверка отобразится, как и ожидалось.
  3. Введите некоторые значения в текстовое поле
  4. Нажмите кнопку еще раз, событие «щелчок» не срабатывает должным образом (но работает нормально, когда пользователь нажимает второй раз)

Это странно, когда пользователю нужно дважды щелкнуть кнопку отправки, чтобы выполнить действие после сбоя проверки.

Я нашел это поведение в основном с управлением текстовым полем.


person user2413664    schedule 04.02.2014    source источник
comment
У меня тоже такая же проблема, но я особо не заморачивался. Если вы настаиваете на решении этой проблемы, вы можете попробовать показать сообщение проверки справа от текстового поля, чтобы кнопка не опускалась, и вы могли нажать ее в первый раз.   -  person MustafaP    schedule 04.02.2014
comment
@user2413664 user2413664 Это не проблема, когда сценарий кендо для события фокуса текстового поля удаляет требуемую проверку, поэтому ваше событие щелчка не срабатывает. Потому что оба события срабатывают одновременно. так что не волнуйтесь, это поведение кендо.   -  person Jaimin    schedule 04.02.2014
comment
так как вы уже знаете jsfiddle: попробуйте использовать кнопку Tidy Up в верхнем меню   -  person Lars Höppner    schedule 06.02.2014


Ответы (2)


Это связано с тем, что когда вы нажимаете кнопку, происходит проверка, потому что включена функция validateOnBlur. Установите Validator validateOnBlur на false.

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

person Jarno Lahtinen    schedule 01.10.2014

Я попытался воспроизвести с текущей версией пользовательского интерфейса Kendo и не смог. Это здесь будет работать, как и ожидалось (выполняя ваши шаги, он напечатает «недействительно», затем «действительно»):

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

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

(демонстрация)

person Lars Höppner    schedule 05.02.2014
comment
Проблема была не в версии. Если вы удалите CSS из моей ссылки Jsfiddle, это сработает !!!!!! - person user2413664; 07.02.2014