RequiredFieldValidator показывает места: встроенный текст

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

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

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

Edit:

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

ОТВЕТЫ

Ответ 2

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

Сказал, что это было взломано!

Ответ 3

Использование селектора атрибутов CSS и! важно, я сделал это. Мне пришлось использовать селектор "contains", чтобы он работал в 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", селектор атрибутов на промежутке ударяет и заставляет его быть блоком. Вам просто нужно сделать ONE CSS-запись, как и выше, и убедиться, что вы сделали каждый валидатор этого класса.

Ответ 4

Я нашел решение, которое работает, переопределяя метод .net ValidatorUpdateDisplay() в JavaScript и должен быть помещен перед тегом тега 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>

Ответ 5

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

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

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

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

Я думаю, что подход Blackomen также хорош, но его нужно также выборочно применять.

Ответ 6

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

HTML

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

CSS

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

Ответ 7

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

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

function wrapValidators() {

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

3) добавить css в 'block' class "display: block"