Использование jQuery Autocomplete с Validator onBlur проблема синхронизации - PullRequest
4 голосов
/ 14 мая 2010

Вот моя проблема, у меня есть элемент ввода в форме, который реализует jQuery.Autocomplete и jQuery.validate, все работают нормально, кроме случаев, когда я щелкаю элемент в списке автозаполнения, чтобы выбрать его.

Что происходит, проверка происходит до того, как автозаполнение устанавливает свое значение. Поскольку проверка происходит в onBlur, и вы просто щелкаете элемент в списке автозаполнения, размытие срабатывает, и проверка происходит за доли секунды до того, как ввод заполнится новым значением.

Я бы не возражал против двойной проверки, если бы она была на стороне клиента, но я выполняю дорогостоящую удаленную проверку ajax в этом поле, поэтому я действительно хотел бы решить эту проблему правильным образом.

Моя первая мысль - проксировать все валидационные события onBlur через функцию, которая истекает через 10 мсек, по сути, переворачивая порядок событий. Но я думаю , что означает разрыв с кодом jQuery.Validate.js, чего я бы не хотел делать.

Есть идеи?

1 Ответ

4 голосов
/ 15 мая 2010

Мне удалось заставить это работать, но, возможно, не так элегантно, как мне бы хотелось. В идеале я хотел бы вызвать прототип или версию по умолчанию для onfocusout из закрытия тайм-аута, но я не смог понять, как ссылаться на него из этой области.

Вместо этого я выбрал переопределение метода onfocusout с копированием / вставкой кода в закрытие тайм-аута. Единственный другой трюк состоял в том, чтобы изменить ссылки с этого на _this, чтобы они работали в другой области закрытия тайм-аута.

$("#aspnetForm").validate({
        success: "valid",
        onkeyup: "false",
        onfocusout:
            function(element) {
                //Delay validation so autocomplete can fill field.
                var _this = this;
                setTimeout(function() {
                    if (!_this.checkable(element) && (element.name in _this.submitted || !_this.optional(element)))
                        _this.element(element);
                    _this = null;
                }, 250);
            }
    });

Не стесняйтесь публиковать улучшения.

...