What is the best way to display a shaded textbox when form validation fails?

I have an ASP.NET MVC application with a form that contains the following code. I want to customize it so that when the FirstName field is left blank, the text box displays a red border and shaded background, which is a common design on websites.

Can someone please guide me on how to achieve this effect?

Here is the model class field:

 [Required (ErrorMessage ="You must enter a first name")]
 public string FirstName { get; set; }

And here is the form field in question:

 <div class="form-row">
     <label for="FirstName" class="col-3 col-form-label">Number of users to process:</label>
     @Html.TextBoxFor(m => m.FirstName, new { @class = "col-6 form-control" })
     @Html.ValidationMessageFor(m => m.FirstName, null, new { @class = "text-danger" })
 </div>

Answer №1

please include the following css style

.validation-shadow
{
  -webkit-box-shadow: 1px 1px 2px 2px #ddd;   /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 1px 2px 2px #ddd;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 1px 2px 2px #ddd;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

you should also add this snippet of code

@Html.ValidationMessageFor(m => m.FirstName, null, new { @class = "text-danger validation-shadow" })

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

Issue with scroll animation across multiple div elements

I am working on a project where I have two main divs, one with the id of "left-div" and the other with the id of "right-div". In the "left-div", there are multiple nested divs each with their own unique id. The overflow-y property of the "left-div" is set ...

Looking to switch up the display of Ionic Infinite Scroll from vertical to horizontal orientation

Recently delving into Ionic Scroll and encountering a challenge. Finding it difficult to arrange content in a horizontal row. To illustrate my issue, I've created a [pen](http://codepen.io/shaikmaqsood/full/zBbREr/ This is the PEN) for better unders ...

iTextSharp struggles to convert certain HTML elements to PDF format

After experimenting with the codes provided in this post, I managed to create the following code snippet: var my_html = this.GetmyReportHtml(); var my_css = this.GetmyReportHtmlCss(); Byte[] bytes; using (var ms = new MemoryStream()) { ...

What is the best way to include two additional columns next to the sidebar?

I'm having trouble adding another two-column section next to the sidebar. Is there anyone who can help me out? <!-- -------------Navigation Bar------------- --> <div class="sidebar"> <a class="active" href="#home">Home</a ...

Divide the input string into a jagged array

string[] listKeys = key.Split(','); string[] OrKeys; string[][] AdvListKeys; for (int i = 0; i < listKeys.Length; i++) { OrKeys = listKeys[i].Split('|'); for (int j = 0; j < OrKeys.Length; j++) { AdvListKeys = ...

What should be utilized: Web Services or WCF Services?

Our company has a C# .NET Windows application in place, and now we are planning to develop a web application using ASP.NET to expand its functionality to the worldwide web. The idea is to deploy certain services from our Windows application for use by the ...

Can you identify the missing piece in my design?

#container { width: 250px; margin: 0 auto; } .group { border: 1px solid grey; margin-bottom: 20px; } .group p { text-align: center; font-family: Helvetica sans-serif; font-size: 25px; color: #2e3d49; } .group img{ wid ...

Animation is not applied to Bootstrap Collapse on a row within a table

My Bootstrap 4 table has an issue - when I apply the "collapse" class to a table row, it behaves differently compared to applying it to a div element. Clicking "animate div" smoothly animates the target div, but clicking "animate tr" does not animate the ...

Customize the height of the Angular Material autocomplete dropdown to meet your needs

Context I have been working on a customized autocomplete feature using Angular Material, and I need to adjust the height of the dropdown results box for better visibility. Exploration After conducting some research, I discovered that Angular Material cu ...

Reasoning behind using double colons in CSS

In the realm of CSS3, a significant change was made with the introduction of the double colon notation. This modification aimed to differentiate between pseudo-classes and pseudo-elements in styling elements [CSS3 selectors spec]. An illustration of this d ...

Place picture in the bottom right corner of the div without using absolute positioning

I am looking for a way to position an image in the lower right corner of a div, but I want to avoid using absolute positioning. The reason for this is that when I use absolute positioning, the text wrap is affected due to the float right applied to the ima ...

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue: 1. Visit the following page of the website: 2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear. I have been struggling ...

Utilizing the background-clip property with a gradient overlay

My Objective: https://i.sstatic.net/DscXK.png My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look. ...

Developing a customized JSON structure

I am currently working on constructing a JSON request to be sent to the email service provider GetResponse in order to add a contact to a specific mail campaign. The structure I am aiming to achieve is outlined in this document [ "API_KEY", { ...

How can a div fill the remaining vertical space, despite the dynamic height of the div above it?

Check out my code snippet on JSFiddle: http://jsfiddle.net/nom4mxLt/ <div id="wrapper"> <div id="yellow">variable height (I put 200px but can change in realtime)</div> <div id="red">This one should fill all remaining space ...

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

Clear Localization

Incorporating explicit localization into my pages, such as: <asp:Literal ID="appTitle" runat="server" Text="<%$ Resources:TranslationResource, AppTitle %>"></asp:Literal></div> If the AppTitle resource is missing, is there a metho ...

"Trouble with changing the active color of the dropdown button in a Bootstrap

Take a look at my navbar image below. When the home page is active, it is simply underlined. https://i.sstatic.net/e2Au3.png Another picture of my navbar shows an issue with the dropdown menu being highlighted in a different color when active. I've t ...

utilizing web sockets for application programming interface

In my c#.net application, I need to continuously receive API messages that come frequently. My team has recommended using Web sockets for this purpose, but I am currently consuming the API through HTTP. Can anyone provide insight into which method is bet ...

Retrieve group events within a specified timeframe using the Microsoft Graph SDK for .NET

Trying to retrieve events from a group calendar within a specific date range, I came across this helpful post: Microsoft Graph SDK .NET get events in range After reviewing the code provided in the post, I attempted to modify it for my requirements: Date ...