Sivastyle Ответов: 3

Проблема при установке Display ="Dynamic" для валидатора обязательных полей.

Here is my ASP.NET code. Simple. it has a A textbox associated with a required field validator and a submit button.

 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

            ControlToValidate="TextBox1" Display="Dynamic"

            ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
        <asp:Button ID="Button1" runat="server"  Text="Click Me" />

Do the following

1. Click on Button1

2. RequiredFieldValidator will be shown

3. Type some text in TextBox

4. Use your Mouse(no tab please). and click on the button , you can see that your page does not "POSTBACK" and only the validation gets cleared. you need to

click again the button for Submission of Form.

This seems to be  a bug by Microsoft when setting the property Display ="Dynmaic" and Is there a easy workaround without changing the intended behavior for this available? I couldn't find a solution for this anywhere.

3 Ответов

Рейтинг:
2

Al-Farooque Shubho

Очень хороший вопрос.

Я бы не назвал это жучком. Нам нужно понять, что на самом деле происходит под капотом.

Когда вы устанавливаете Display="Dynamic" , свойство Validator controls style фактически устанавливается как "display:none" и, следовательно, оно не сохраняет никакого пространства, когда теперь отображается валидатор.

Если вы используете firebug, вы увидите, что элемент управления Validator будет отображать следующий HTML-код:

<span style="color: Red; display: none;" id="RequiredFieldValidator1">RequiredFieldValidator</span>


И когда вы устанавливаете Display="Static", свойство стиля элемента управления Validator фактически устанавливается как "visibility:hidden", что фактически сохраняет пространство в пользовательском интерфейсе, когда валидатор не отображается.

Если вы используете firebug, то увидите, что элемент управления Validator теперь будет отображать следующий HTML-код:

<span style="color: Red; visibility: hidden;" id="RequiredFieldValidator1">RequiredFieldValidator</span>


Теперь позвольте мне объяснить, что происходит, когда установлен параметр Display="Dynamic".

--Вы просматриваете страницу и нажимаете кнопку, не помещая никакого текста в текстовое поле. Отображается сообщение об ошибке проверки.

--Вы кладете какой-то текст в текстовое поле и пытаетесь нажать кнопку. Это приводит к тому, что событие javascript "onmouseout" срабатывает на элементе управления текстовым полем (перед запуском события "onclick" на кнопке), что приводит к тому, что валидатор снова проверяет текстовое поле, ошибка не обнаруживается и свойство стиля элемента управления валидатором устанавливается в "display:none".

--Это приводит к тому, что соответствующий HTML-элемент элемента управления валидатора (span) отказывается от своего места в пользовательском интерфейсе, и, следовательно, весь пользовательский интерфейс перерисовывается в браузере. Таким образом, кнопка находит свое новое место и занимает пространство, которое было сохранено пространством элемента управления валидатора (span).

--Пользовательский интерфейс while перекрашивается до того, как ваше событие click будет выполнено на кнопке. Таким образом, на самом деле ваше событие click в браузере вообще не выполняется. Итак, ничего не происходит, и вам нужно снова нажать на кнопку.

Чтобы проверить вышеприведенное объяснение, вы можете выполнить быстрый тест следующим образом:

--Снова обновите браузер.
--Нажмите кнопку, не помещая никакого текста в текстовое поле. Появится сообщение об ошибке проверки.
--Напишите какой-нибудь текст в текстовом поле и нажмите на любое место в браузере (не на кнопку).
--Это вызовет событие "onmouseout" текстового поля, валидатор будет запущен, сообщение об ошибке исчезнет, и кнопка заменит место сообщения проверки. Тот же результат.

Так что на самом деле это не ошибка. Скорее всего, это просто то, что мы должны понимать, что происходит под капотом, когда мы устанавливаем Display="Dynamic", и это нам нужно соответствующим образом настроить наши коды/реализацию.

Надеюсь, это поможет.

Sivastyle

Причина моего голосования 5
Много информации и правильно указал причину проблемы.

Рейтинг:
1

Sivastyle

Привет Аль-Фарук Шубхо,

Спасибо за подробную информацию. Я знал, почему это происходит, но я думал о том, чтобы заявить об этом как об ошибке, потому что мы ожидаем, что это свойство будет работать так же, как Display ="Static", но не будет занимать пространство, так как именно это и является целью динамического отображения.

Однако вы указали мне прямо, упомянув, что пользовательский интерфейс перекрашивается до выполнения события click(ранее я думал, что какой-то клиентский скрипт может помочь) на кнопке-это причина проблемы.


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

Рейтинг:
0

turbochris

Привет. Чтобы обойти это, я бы завернул валидатор в

<br />
<span class="xxxx"><br />
Validator here<br />
</span><br />


Затем вы можете установить класс xxxx в display:block.