RequiredFieldValidator размещает отображение: встроенный в текст

Question

У меня есть RequiredFieldValidator с Display="Dynamic" в моей веб-форме ASP.NET. Я назначил ему класс, используя свойство CssClass. Я хочу, чтобы сообщение об ошибке отображалось с помощью display: block, поэтому я поместил его в класс css в моей таблице стилей.

К сожалению, валидатор помещает отображение: встроенный в элемент на веб-странице, фактически переопределяя значение моей таблицы стилей.

Можно ли от этого избавиться?

Edit:

Я только что понял, почему это не работает. При установке Display="Dynamic" в валидаторе он устанавливает style="display: none" для тега span при рендеринге. Затем библиотека .net javascript переключает встроенный стиль элемента между none и inline. Это просто, как работает динамический валидатор. Поэтому для того, чтобы это отображалось как элемент блока, мне нужно изменить способ проверки событий на стороне клиента. Возможно ли это сделать?

Answer 1

С помощью селектора атрибутов CSS и! Важно, я это сделал. Мне пришлось использовать селектор «содержит», чтобы заставить его работать в FF, но теперь я протестировал его в IE10, FF и Chrome, и пока он работает. Это действительно просто. Вот пример валидатора на моей странице aspx:

<asp:RequiredFieldValidator runat="server" ID="rfvRequired" ErrorMessage="This is required.<br/>This is line 2" ControlToValidate="tbRequired" ValidationGroup="CommonAttributesValidationGroup" SetFocusOnError="True" CssClass="valerror" Display="Dynamic"></asp:RequiredFieldValidator>

Далее у меня есть стиль для valerror.

span.valerror[style*="inline"]
{
    display:block !important;
    background-color: Yellow;
    border: 1px solid #cccccc;
    font-size:.9em;
}

Вот и все. Как это работает: когда диапазон меняет стиль с «display: none» на «display: inline», включается селектор атрибута на span и заставляет его быть блоком. Вам просто нужно сделать ОДНУ CSS-запись, подобную приведенной выше, и убедиться, что вы делаете каждый валидатор этим классом.

Answer 2

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

, который является блочным элементом; следовательно, даже если ваш RequiredFieldValidator является встроенным, он находится внутри блока div, поэтому в большинстве случаев он будет эффективно отображаться как display: block.

Сказал тебе, что это было хаки!

Answer 3

Может быть, это может помочь вам:
http://caliberwebgroup.blogspot.com/2009/02/overriding-javascript-in-webresourceaxd.html

Answer 4

Я нашел решение, которое работает путем переопределения метода .net ValidatorUpdateDisplay() в JavaScript, и его нужно поставить перед тегом close body.

<script type="text/javascript">
    function ValidatorUpdateDisplay(val)
    {
        if (typeof (val.display) == "string")
        {
            if (val.display == "None")
            {
                return;
            }
            if (val.display == "Dynamic")
            {
                val.style.display = val.isvalid ? "none" : "block";
                return;
            }
        }
        if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1))
        {
            val.style.display = "inline";
        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
    } 
</script>

Answer 5

Один из вариантов - плавать элемент, чтобы элемент действовал «больше как блок».

HTML

<div class="form-group clearfix">
  <asp:CustomValidator runat="server" Display="Dynamic" CssClass="help-block" />
</div>

CSS

span.help-block {
  float: left;
  width: 100%;
}

Answer 6

Я собирался попробовать решение css, но после прочтения того, что вы опубликовали (обновили), я думаю, что могу придерживаться своего. Мне уже приходилось настраивать свой валидатор на сервере по другим причинам, поэтому я просто проверяю тип элемента управления «controlToValidate», затем для элементов управления типа текстового поля добавляю тег <br /> в начало сообщения.

, например
// Inline (if configured)
myvalidator.Text = "<br />My message";

// Normal message and validation summary (if configured)
myvalidator.ErrorMessage = "My Message";

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

Я думаю, что подход Блэкмена тоже хорош, но его также нужно применять избирательно.

Answer 7

Просто установите float: left на ваш css

Используя вышеупомянутое решение, если ваше обязательное поле отображается перед вашим контролем, просто добавьте новый тег строки <br/> между вашим элементом управления и валидатором обязательного поля

Answer 8

Существует простое решение, которое будет работать сейчас и в будущем.

1) Добавить класс в валидатор
2) Используйте jquery для добавления внутреннего элемента в диапазон валидатора или используйте javascript

function wrapValidators() {

    $('.input-error').wrapInner('<span class="block" />');
}

3) добавить css в класс 'block' display: block '