RequiredFieldValidator places display:inline on the text

Question

I have a RequiredFieldValidator with Display="Dynamic" on my ASP.NET WebForm. I have assigned it a class using the CssClass property. I want the error message to be displayed using display: block, so I have placed this on the css class in my style sheet.

Unfortunately, the validator places a display: inline on the element on the web page, effectivaly overriding my style sheet value.

Can I get rid of that?

Edit:

I just realised why this doesn't work. When setting Display="Dynamic" on a validator, it has the effect that it sets style="display: none" on the span tag when rendering. The .net javascript library then switches the inline style of the element between none and inline. That is simply how the dynamic validator works. So for this to display as a block element, I will need to modify how the client side event validation works. Is it possible to do that?

David · Answer 1 · 2017-10-05T13:51:13.713

Using CSS attribute selector and !important 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.

I like this solution. It does not pollute my markup, script or codebehind and it *just works*. Older browsers can live without it -at least in my case. — Arve Systad, Sep 04 '13 at 12:24
With the added div's and separate styling, it is now compatible with older browsers, too. — David, Sep 18 '13 at 00:31

Henry C · Answer 2 · 2012-02-27T22:05:45.180

29

An extremely hacky solution I once used (which I'm not proud of, but it worked) was to wrap the RequiredFieldValidator in a <div>, which is a block element; therefore even though your RequiredFieldValidator is inline, it's inside a block div so it'll effectively appear as display:block in most cases.

Told you it was hacky!

edited Feb 27 '12 at 22:05

answered Mar 01 '11 at 00:43

Henry C

4,781
4
43
83

16

I am not sure why you call your solution as "hacky". This is not hacky, this is the RIGHT way how to do it. What is "hacky" is the idiotic solution with the webresource.axd in the accepted answer. – realPro Feb 27 '12 at 13:05
3

Wrapping the validators in a `div` will only give you the "newline effect" you get from block level elements. Make sure you have a validator with text that spans several lines, give it a background color and you'll see what I mean. Real block level elements has some properties you cannot replicate by wrapping inline elements in a block. – Arve Systad Sep 04 '13 at 12:20
2

my kind of fix! simple and effective. – jplara Apr 15 '14 at 19:26

Pieter Nijs · Accepted Answer · 2010-02-11T11:04:30.717

4

Maybe this can help you:
http://caliberwebgroup.blogspot.com/2009/02/overriding-javascript-in-webresourceaxd.html

edited Feb 11 '10 at 11:04

answered Feb 11 '10 at 10:17

Pieter Nijs

435
3
7

That doesn't work. It simply has the effect that the validator is shown when the page loads (which is not what I want). When I try to sumbit, it changes the style back to "inline" (if validation fails). See my edited post for the reason why this happens. – Pete Feb 11 '10 at 10:48
1

Ok, wasn't paying much attention! I updated my post, maybe that can help! – Pieter Nijs Feb 11 '10 at 11:05
Hey. Thanks for the update. It's not the prettiest solution because it globally affects all validators, and it's dependent on stuff that's implementation details of the .NET framework. But it works (gives the desired result). Though a prettier solution could be to change between toggle a CSS class. That way you at least have the option of deciding on a pr. validator basis if it should be block or inline. – Pete Feb 27 '10 at 16:24
2

Too complicated and invasive. I've solved it applying Blakomen's solution – JPCF Oct 15 '13 at 21:12
1

Could you make your answer stand on its own without the link, please? – Ry- Oct 15 '13 at 22:52

score 2 · Answer 4 · edited Sep 23 '12 at 07:22

I have found a solution that works by overriding the .net ValidatorUpdateDisplay() method in JavaScript, and needs to be put before the close body tag.

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

IMO, this is the best solution – raydowe Jan 09 '13 at 15:08 — raydowe, Jan 09 '13 at 15:08

score 1 · Answer 5 · answered Apr 12 '12 at 22:16

I was about to try a css solution, but after reading what you posted (updated), I think I may stick with mine. I already had to configure my validator on the server for other reasons, so I just check the control type of the "controlToValidate", then for textbox type controls, I add a <br /> tag to the front of the message.

e.g.
// Inline (if configured)
myvalidator.Text = "<br />My message";

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

This keeps the line break from rendering in the validation summary, while still looking right for my inline messages.

I think Blackomen's approach is also good, but it needs to be selectively applied as well.

score 1 · Answer 6 · answered Apr 24 '14 at 20:30

One option is to float the element to make the element act "more like a block".

HTML

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

CSS

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

score 0 · Answer 7 · edited Jul 03 '12 at 17:53

0

There is a simple solution which will work now and in the future.

1) Add a class to the validator
2) Use jquery to add an inner element to the validator span or use javascript

function wrapValidators() {

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

3) add css to 'block' class "display:block"

edited Jul 03 '12 at 17:53

Bo Persson

90,663
31
146
203

answered Jul 03 '12 at 17:19

dotnetnoob

10,783
20
57
103

Yogesh · Answer 8 · 2018-06-23T08:13:05.267

0

Just set float:left to your css

By using above solution if your required field display before your control then simply add new line tag <br/> between your control and required field validator

edited Jun 23 '18 at 08:13

answered Jun 23 '18 at 07:32

Yogesh

180
1
10

RequiredFieldValidator places display:inline on the text

8 Answers8