Regular Expression Validator - display block rather than inline when dynamic

Question

Is there any way to make a RegularExpressionValidator render itself using display:block, instead of display:inline in its style attribute, when setting the Display property to "Display='Dynamic'"?

I have tried setting it in the stylesheet but this gets overwritten when it is rendered on the page.

Thanks

score 36 · Accepted Answer · answered Feb 22 '13 at 18:45

36

The idea above on using a css with !Important was so close I could taste it. Using that idea and CSS attribute selectors I did it. I had to use the "contains" selector to get it working in FF, but now I have tested it in IE10, FF and Chrome and so far it is working. It is really simple. Here is a sample validator in my aspx page

<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>

Next I have a style for valerror.

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

That is it. how it works: when the span changes the style from "display:none" to "display:inline" the attribute selector on the span kicks in and forces it to be a block. You just need to make ONE css entry like the one above and make sure you make each validator that class.

answered Feb 22 '13 at 18:45

David

745
7
8

This worked great for me. I had dynamically displayed validators that I wanted to display underneath the inputs without additional markup. Using this CSS selector and setting the display: block property with the !important keyword did exactly what I needed. They are hidden by default, shown as needed (below the input), and hidden again when a valid value is selected/typed. Thanks! – Tim Franklin Dec 12 '13 at 19:30
Why is this not accepted? I voted up this is an excellent solution. – Chris Hawkes Feb 14 '14 at 19:34
+1 thanks - this solved something I was fighting with for hours - this needs to be accepted as the answer – J King Feb 21 '14 at 03:55
It looks very clever and I liked it very much, until I saw the div wrapper idea. The problem of the selector is that it depends on an implementation detail of the ASP.NET helper script. If Microsoft changes that, the solution fails. – Rolf Dec 10 '15 at 16:16

score 8 · Answer 2 · answered Oct 18 '12 at 09:36

8

Just wrap the validator in a div:

<div><asp:RegularExpressionValidator id="x" runat="server"></div>

answered Oct 18 '12 at 09:36

WIRN

915
1
16
31

1

This is the best way. – Jumpei Dec 12 '13 at 06:59
-1 because the question is about a validator with Display="dynamic" which means they don't want the validator to be visible until the javascript determines that it's a valid error and using a div will cause the validator to take up space. – Aaron Hawkins Feb 07 '14 at 15:25
2

The div has width and height of 0 as long as the Validator is not displayed, making it invisible. So: +1 again – Rolf Dec 10 '15 at 16:03

score 3 · Answer 3 · edited Aug 26 '11 at 06:55

3

How about using !important in the CSS class?

edited Aug 26 '11 at 06:55

Jérôme Verstrynge

57,710
92
283
453

answered Mar 01 '11 at 13:25

Andy

31
2

I can confirm this solution works and is incredibly easy to implement. – Stefan Mohr Dec 20 '11 at 08:14
6

This doesn't work for dynamic validators as it overrides the display: block; that hides them in the first place. – alnorth29 Jun 14 '12 at 14:50

score 3 · Answer 4 · answered Apr 19 '11 at 16:42

3

I've found the only way to have the control not take up space when it is hidden and also display block is to put a <br /> tag after each validator.

So initially we have this: enter image description here

Then if there is an error it looks like this: enter image description here

answered Apr 19 '11 at 16:42

The Muffin Man

19,585
30
119
191

It's still not a block, but an inline element on a separate line. – Rolf Dec 10 '15 at 16:06

score 2 · Answer 5 · answered Apr 26 '12 at 16:28

I've found a solution that solves this using a template control:

<asp:RequiredFieldValidator runat="server" EnableClientScript="True" Display="Dynamic" >
   <TemplateControl>
      <span class="error">This field is required.</span>
   </TemplateControl>
</asp:RequiredFieldValidator>

CSS:

.error{position:relative;display:block;}

The resulting html is a bit messy, but it allows a display:block that pushes the validation into the next line;

<span id="ctl00_###" style="color: red; display: inline; ">
   <templatecontrol>
      <span class="error">This field is required.</span>
   </templatecontrol>
</span>

score 1 · Answer 6 · edited Dec 02 '12 at 09:03

Works with .Display = ValidatorDisplay.Static for me, didn't set EnableClientScript to true.

Update 1 and affecting cssClass with a class having display: block; to each regValidator

Update 2 forget about what I wrote before, I guess you don't care now about this but for others I would say, I think it's a forget of MS about regExpVal to not respond to display: block cause customValidator seems to work..

So for the regExpValidator I found that putting clear:left; and float:left works, and if the element under them moves while errors appears, you put clear: left on it.

score 0 · Answer 7 · edited May 23 '17 at 10:29

ASP.NET injects a javascript file with validation code, it's the second script tag after the form tag in the HTML. This contains a function "ValidatorUpdateDisplay" that is called to show/hide validation messages. This can be overridden to use different javascript to show/hide e.g. if you are using jquery:

ValidatorUpdateDisplay = function (val) {
    // Show/hide this validator's error message
    if (val.isvalid){
        $(val).hide();
    } else {
        $(val).show();
    }
}

Or in your case:

ValidatorUpdateDisplay = function (val) {
    // Show/hide this validator's error message
    if (val.isvalid){
        val.style.display = 'none';
    } else {
        val.style.display = 'block';
    }
}

Simply put this code into a script tag after the ASP.NET form opening tag. Note this will affect all validators on the page, and ignores whether Display is set to Dynamic - if you wanted to support this you could extend it with code from the original function or custom code to check the type of validator.

Also see this question Can you have custom client-side javascript Validation for standard ASP.NET Web Form Validators?

Regular Expression Validator - display block rather than inline when dynamic

7 Answers7

Linked