Плагин проверки jQuery - не устанавливает фокус в браузерах Webkit

Надеюсь, вы можете помочь ... я использую http://bassistance.de/jquery-plugins/jquery-plugin-validation/ в проекте ASP.NET MVC в форме ввода адреса.

Я действительно пытаюсь выяснить, есть ли какой-то конфликт между подключаемым модулем проверки и браузерами webkit (например, Safari, Chrome) или между браузерами jQuery и webkit, прежде чем я приступлю к поиску ошибок (хотя у меня уже потратил несколько часов и никуда не денется :()

У нас есть главная страница MVC, содержащая в разделе ‹head›:

$("#deliveryAddressForm, #paymentForm").validate({

    showErrors: function(errorMap, errorList) {

        if (errorList.length > 0) {

            var form = errorList[0].element.form;

            if (form.id == "deliveryAddressForm") {
                displayErrorMessage("<%= CheckoutController.ERROR_MESSAGE_DELIVERY_ADDRESS %>");
            }
            else if (form.id == "paymentForm") {
                displayErrorMessage("<%= CheckoutController.ERROR_MESSAGE_ORDER %>");
            }

            $("span.error").remove(); // remove server-side validation error messages
        }
        this.defaultShowErrors();     // call overridden showErrors
    },
    onkeyup: function(element) {                     // on keyup if form now valid remove banner error message
        if ($("label.error").length > 0) {           // If some client-side errors currently displayed
            if ($("#" + element.form.id).valid()) {  // validate form, then if no errors remain
                $("#errorMessage").remove();         // remove banner error message
            }
        }
    }
});

Функция displayErrorMessage () выглядит так:

function displayErrorMessage(msg) {
    $("#errorMessage").remove();
    $("#userMessages").append('<div id="errorMessage">' + msg + '</div>');
}

где #userMessages - это блок div вверху страницы для отображения сводки сообщения об ошибке в виде баннера. (например, "Возникла проблема с вашим адресом доставки. Исправьте ошибки ниже")

Все это отлично работает во всех браузерах, кроме браузеров webkit (например, Safari, Chrome).

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

После неудачной попытки отправить форму - скажем, номер телефона был пустым - сообщения об ошибках на стороне клиента появляются, как и ожидалось. Когда вы начинаете вводить, скажем, поле номера телефона, код onkeyup вызывает valid () (который повторно проверяет форму и возвращает true, если она действительна), обнаруживает, что она больше не недействительна (пусто), и должна удалите баннер сводки сообщения об ошибке (#userMessages).

Хотя все браузеры правильно удаляют баннер, в Safari поле теряет фокус, хотя толстая синяя рамка остается на поле. Таким образом, последующие нажатия клавиш теряются, и вам нужно снова щелкнуть по полю номера телефона, чтобы продолжить.

Надеюсь, ты сможешь помочь, я в растерянности!

заранее спасибо

Ed


plugins validation jquery safari webkit
person edwardsmale    schedule 08.12.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я его расколол!

Я создал тестовую страницу в отдельном проекте с очень простой скелетной формой. Затем я постепенно добавил сценарии и разметку с исходной страницы на тестовую страницу, каждый раз проверяя ее в Safari. Ничего не заставило Safari сломаться, пока я не добавил ссылку на наш файл CSS, а затем он перестал работать!

Я провел поиск по CSS в двоичном стиле, пока не сузил его до одной строки:

input.error { float: left; color: red;  vertical-align: top; text-align: left; }

Этот стиль применяется подключаемым модулем проверки к полю ввода с ошибкой.

Это был «float: left», который ломал Safari и Chrome.

Внес несколько незначительных изменений в CSS, чтобы избавиться от этого, и теперь он работает! Кажется немного странным, что float: left должен вызывать эту проблему ...

Ed

person edwardsmale    schedule 08.12.2009