jQuery Validate Plugin Добавляет встроенный стиль к ошибкам?

Question

У меня есть чрезвычайно простой пример этого здесь .Для репликации попробуйте отправить форму, после чего она уведомит вас о том, что поле обязательно для заполнения.Затем заполните текст, затем удалите весь текст.Вы увидите сообщение об ошибке, переходящее к следующей строке.

После проверки с помощью Firebug он показывает, что плагин добавляет style="display: block" встроенный элемент.Как я могу предотвратить создание любых встроенных стилей на элементе?Я знаю, что вы можете изменить класс .error для стиля, однако применяемый к нему встроенный стиль явно превосходит применяемый класс.

Answer 1

Добавление style="display: block" через JavaScript - это единственный способ динамически отображать и скрывать элементы во время выполнения.Это не так уж и плохо, как в большинстве встроенных стилей.То же самое происходит, когда вы вызываете $("#myElement").show() в обычном jQuery.

Редактировать: чтобы узнать, какое поведение вы хотите, я пошел и отредактировал ваш jsBin;если я все сделал правильно, новая версия должна быть здесь .

Стало ясно, что проблема была в том, что поведение this.defaultShowErrors() заключалось в использовании метода jQuery .show() при ошибкесписок, который (как обсуждалось выше и в комментариях) в этом случае будет устанавливать встроенный стиль display: block.Поскольку мы хотим display: inline, нам нужно изменить showErrors следующим образом:

showErrors: function (errorMap, errorList) {
    this.defaultShowErrors();
    $.each(errorList, function (i, error) {
        $(error.element).css("display", "inline");
    });
}

Таким образом, когда ошибки скрыты, а затем снова показаны, наша пользовательская функция showErrors сработает.Они будут установлены на display: block на мгновение к this.defaultShowErrors(), но затем мы исправим это и установим для них display: inline.

Answer 2

Для всех остальных я исправил это с помощью следующего «хака».Если есть более чистый способ, просто дайте мне знать.

http://jsbin.com/agexa3/10/

Answer 3

Вы можете использовать

showErrors: function (errorMap, errorList) {
                this.defaultShowErrors();
                $.each(errorList, function (i, error) {
                    $(error.element).next('span.error').css("display", "inline");
                });
            }

Answer 4

Это хорошее решение (спасибо Дамиларе и Доменику)

showErrors: function (errorMap, errorList) {
     this.defaultShowErrors();
     $.each(errorList, function (i, error) {
          $(error.element).next('span.error').css("display", "inline");
     });
}

Однако, если это не сработает, проверьте структуру. $ (error.element) - это элемент управления с ошибкой. ".next" - его следующий родной брат. В моем случае этот брат был, а его первым потомком был тег span.error. Используйте, например, эту запись:

$(error.element).next().children(':first-child').css("display", "inline");