Разница между html, отображаемым, когда проверка клиента истинна в MVC3

Question

Я создаю новый сайт MVC3. Проверка на стороне клиента включена в web.config

<appSettings>
   <add key="ClientValidationEnabled" value="true"/> 
   <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

Сценарий # 1: вывод HTML, созданный после неудачной проверки (на стороне клиента):

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error">
    <span htmlfor="UserName" generated="true" class="">Please enter an email address</span>
</span>

Обратите внимание на вложенный тег span, где самый внутренний тег имеет класс = ""

Сценарий № 2: Пользовательская проверка на стороне сервера. С той же конфигурацией web.config я добавил проверку на сервере, чтобы проверить пользовательское бизнес-правило. Проверка не пройдена, я добавляю ошибку в ModelState.

Сгенерированный HTML выглядит следующим образом:

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error">Please enter a valid email address</span>

Обратите внимание, что был создан только один тег span, а НЕ вложенный тег.

Из-за этого поведения мне больно иметь дело с моим CSS, поскольку я не могу просто стилизовать класс .field-validation-error, поскольку в моем сгенерированном HTML есть 2 разных конечных результата.

Вкратце: проверка на стороне клиента генерирует только 1 тег диапазона, проверка на стороне сервера генерирует 2 тега диапазона.

ВОПРОС: Это поведение платформы с отступами или я что-то не так делаю?

Answer 1

Это поведение платформы с отступами или я что-то не так делаю?

Вы не делаете ничего плохого. Это просто, как работает скрипт jquery.validate.unobtrusive.js. Таким образом, вы можете назвать это отсутствующей функцией, несоответствием, PITA, как угодно, но именно так они и сделали из коробки.

При этом плагин jquery validate является расширяемым, и мы можем настроить его так, как нам нравится:

$.validator.setDefaults({
    // customize the way errors are shown
    showErrors: function (errorMap, errorList) {
        if (errorList.length < 1) {
            // because we have customized the way errors are shown
            // we need to clean them up if there aren't any
            $('.field-validation-error', this.currentForm).hide().attr('class', 'field-validation-valid');
            $('.input-validation-error', this.currentForm).removeClass('input-validation-error');
            return;
        }
        $.each(errorList, function (index, error) {
            // simply toggle the necessary classes to the corresponding span
            // to make client validation generate the same markup as server
            // side validation
            var element = $(error.element);
            element.attr('class', 'input-validation-error');
            element.next('span').show().text(error.message).attr('class', 'field-validation-error');
        })
    }
});

Answer 2

Если вы хотите всегда использовать вложенные интервалы для сообщений проверки после сбоя проверки сервера (по причинам стиля), вы можете сделать следующее:

$(document).ready(function(){
    $('.field-validation-error').each(function(){
        $(this).html($('<span>').text($(this).text()));
    });
});