RegularExpressionValidator ErrorMessage With Border Overflowing Across Two Lines

Question

When attempting to create a lengthy RegEx ErrorMessage via server controls, I though it would be a nice add a background color and boarder to give the message some "flair".

When I tried attaching a CssClassto the server control with a border and color, the border ran over across two lines like below:

______________________________________
|                                     |
|    ---------------------------      |
|   | My very long error message      |  <-- confined box where error
|    ----------------------------     |      messages and text-box for input
|    ----------------------------     |      resides
|      that ran over two lines  |     |
|   ---------------------------       |
|                                     |
|              ^                      |
|              | The two line error   |
|                 message             |
|_____________________________________|

<asp:RegularExpressionValidator 
    ID="MyFirstRegex" 
    ControlToValidate="SomeControl" 
    runat="server">
    Display="Dynamic" 
    CssClass="SomeClass"                
    ValidationGroup="MyGroup" 
    ErrorMessage="Silly User. <br\> You made a very, very, very, very, very dumb error"<br />"
    ValidationExpression="regex code to validate" 
</asp:RegularExpressionValidator>

<asp:RequiredFieldValidator 
    ID="ReqOne"  
    ValidationGroup="MyGroup" 
    ControlToValidate="SomeControl" 
    runat="server">  
</asp:RequiredFieldValidator>

Also, when it hides, the boarder is visible (just not the contents)

I have tried placing the control in a div with run at server. The issue with that is when you hide the div, the regex validation stops. Any ideas on how to approach this?

Answer 1

Normally you set Validators to Display="Dynamic". This ensures they do not take us space until they are triggered by a button. This is done by aspnet by adding style="display:none;" to the <span> element containing the error message.

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

Now when the validator is triggered the style is changed from display:none to display: inline.

<span id="RequiredFieldValidator1" class="SomeClass" style="display: inline;">RequiredFieldValidator</span>

And it is with the inline part that causes all the problems. We want it to be a normal block. To do that you can override a javascript function that normally is located in the ScriptResource.axd file. That function is called ValidatorUpdateDisplay, and is has a line which contains val.style.display = val.isvalid ? "none" : "inline";. That is the line that needs to be overridden.

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