Error Message Border Exceeds Width Limit and Spans Over Two Lines in Regular Expression

While working on creating a lengthy RegEx error message using server controls, I had the idea to add some style by giving the message a background color and border.

However, when I tried to add a CSS class to the server control with a border and color, the border spanned across two lines like this:

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

Furthermore, even when hidden, the border remains visible (just not the contents).

I attempted placing the control in a div with `run at server`. However, the issue with that is once you hide the div, the regex validation ceases to function. Do you have any suggestions on how to approach this?

Answer №1

Usually, Validators are set to Display="Dynamic". This ensures that they do not occupy space until triggered by a button click. ASP.net achieves this by adding style="display:none;" to the <span> element containing the error message.

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

When the validator is activated, the style changes from display:none to display:inline.

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

The issue arises with the inline display causing problems. The desired display should be a normal block. To achieve this, you can override a javascript function usually found in the ScriptResource.axd file. This function is named ValidatorUpdateDisplay, and it contains a line that sets

val.style.display = val.isvalid ? "none" : "inline";
. This specific line needs to be modified.

<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 = "block";
        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
    } 
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

css How to target a specific row and column within a table using css selector in Selenium WebDriver

When attempting to locate css=table#Salarytable.dataTable.3.4 in Selenium IDE, the cell highlights correctly. However, when using this locator in my Selenium code... String salary=driver.findElement(By.cssSelector("table#Salarytable.dataTable.3.4")).get ...

Ways to conceal a div element when the JSON data does not contain a value

If the value in "desc" is empty, then hide <div24> and <popup-desc>. html <div class="popup"> <div class="popup-top" style="background-color: '+e.features[0].properties.fill+';"> ...

Is there a way to keep a div element anchored at the top of the page until I reach the bottom and then have it stick to the bottom as I continue

I have a question that I hope is clear enough! On my webpage, there is a div at the top that I want to move to the bottom when I scroll and reach the end of the page. Hopefully, you understand what I'm trying to achieve! If anyone has any ideas, I&ap ...

Arranging columns in GridView into two rows for each record

I'm facing a challenge with a large GridView in my ASP.Net application using C#. The GridView is so big that it exceeds the size of a standard webpage. I'm wondering if there's a way to create a GridView where a set of columns are displayed ...

I desire my grid to exhibit an identical appearance to that of the jquery datepicker

I have an interactive element called the "open grid" that, when clicked on, reveals a grid of buttons. I'm looking for help with coding it so that instead of being displayed below the textbox, the grid of buttons can be hovered over the "open grid" li ...

Tips for storing the output from a web service in JSON form

After retrieving the result from a web service, I have the ResultedValue stored in a string within a loop, as shown below: for (int j = 0; j < value.Count; j++) { var xmlAttributeCollection_for_period = value[i].Attributes; if (xmlAttributeColl ...

Can you explain the variance between using @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS?

Can someone explain the difference between using @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS? When I tested them separately in my code, they seemed to have the same outcome. @media and screen (max-width: 1000px) { .grid ...

Hiding elements in dark mode using `hidden` or `block` in Tailwind will not override its own hidden selector

To switch between dark and light mode for these two images, the dark:block selector does not override the hidden class. <div className="ml-5 content-center"> <img className="hidden dark:block h-6 w-auto my-1" src="/stati ...

organize information in a table using c# and mongodb

I need to create a function that allows users to sort the data in a frontend table by clicking on the up and down arrows of a specific column. Once the user clicks on a column, all the data in other columns should be sorted based on that particular column. ...

Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

Hello, I am struggling to include a logo in my navbar and it's not being displayed. Despite researching similar queries from others, I still can't figure out why the image won't show up. I'm uncertain whether the issue lies within my co ...

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in $('td:contains("text")').css('color','red') after an Ajax load script? Here is the main code snippet <div id="datatable"></div> <script src="https://code.jquery.com/j ...

Guide to positioning an image absolutely within a div

I am struggling to position a small close image within a div without success. The goal is for the image to always appear on the left side of the div, regardless of the content. The content consists of a text label with a maximum length of 8 characters. Iss ...

How can we target every nth child element universally?

I am working with an HTML structure that has a specific layout, and I need to target all odd <span> elements globally without considering their parent elements. Is there a way to style 1, 3, 5, 7, 9 in red color? I attempted to use :nth-child(odd) b ...

Icons on Google Calendar events - Mini images beside your schedule

I'm in the process of developing a website where I plan to integrate Google Calendar. I want to include a small icon next to specific events to denote certain details. While the "categories" feature in Google Calendar allows me to assign highlight col ...

Tips for improving the focus of the bootstrap datetime picker?

I have integrated the Bootstrap datetime picker (bootstrap-datetimepicker.min.js) into my code. Within the DIV tag, I have included the class="modal fade" to open the first popup. In the first popup, there is a datetime picker. When clicking on the picker ...

Error: The combined character count of a DataValidation list must not surpass 255 characters

I am currently working on generating a formula field dynamically using EPPlus. While the formula field is created successfully if it contains less than 255 characters, an exception is thrown when it exceeds 255 characters. The exception message states: Exc ...

Check the JSON data for validity within a .NET environment

Is there a method in .NET to validate a JSON string before sending it back to the client? I have an ASHX handler that processes form variables and generates JSON data for the client. Sometimes, the HTML content within the JSON gets corrupted during encodin ...

Setting the binding property for a ListBox in WPF

In my application, I am currently working with a listbox that is bound to a collection in the set DataContext object. The list is being displayed using the ToString() function of the objects in the collection. <ListBox ItemsSource="{Binding SomeCollect ...

How to Send C# Array as a Parameter to a JQuery Function

I'm currently working on passing a C# array to a JQuery function as a parameter. The C# code I have to call the function is: //Create an Array from filtered DataTable Column var GatepassIDs = defaultView.ToTable().AsEnumerable().Select(r => r ...