A new ASP.NET MVC-5 web application is missing the class definition for "input-validation-error."

I recently created a new ASP.NET MVC-5 web application using Visual Studio 2013. When I attempted to use the built-in login form and left the required fields empty, I noticed that the fields were not highlighted in red as expected.

https://i.sstatic.net/mxR82.png

After inspecting the generated markup, I found that fields with validation errors should have the class input-validation-error. However, upon searching through the CSS files automatically generated in my ASP.NET MVC-5 application - particularly site.css, bootstrap.css, and bootstrap.min.css - I could not find a definition for input-validation-error. Can anyone provide advice on how to highlight fields with red color when they have validation errors and why this is not the default behavior in ASP.NET MVC-5?

cssasp.netasp.net-mvcasp.net-mvc-5

Answer №1

Why isn't this the default behavior in ASP.NET MVC 5?

The default behavior of ASP.NET MVC 5 does not include this feature. To implement it, you can simply add the following CSS classes to your Site.css file:

.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

Answer №2

For those working with Bootstrap, it is necessary to transfer the CSS from Bootstrap's validation styles to the corresponding .NET/jquery classes.

https://i.sstatic.net/ONDDV.png

In Bootstrap 4.5, the code appears as follows:

Adapted from 

.was-validated .form-control:invalid, .form-control.is-invalid

.form-control.input-validation-error {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

Adapted from 

.was-validated .form-control:valid, .form-control.is-valid

.form-control.valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

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

The Jquery $.get() method is only delivering a single parameter in the request

Whenever the submit button on my form is clicked, I am looking to intercept the data and send it to an API. However, currently, the code I have only sends the first parameter (Id) and not the others. $('#myForm').submit(function (e) { e.p ...

jqueryasp.netajaxapi

Select the input element in CSS that does not have a parent with the class name 'classname'

In my stylesheet, I have a specific rule that styles various input fields and select elements. However, I'm facing an issue where this styling is being applied to all text fields on the page, including ones inside certain elements with a specific clas ...

csscss-selectors

Utilizing Literal and Instance Formats in JavaScript

There are two main methods for creating JavaScript objects. The confusion arises in understanding when to use each notation. Below are examples of both literal and instance variables, each holding different values and producing different results when opera ...

javascriptasp.netwebformsliterals

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

javascripthtmlcssangularjsangular

Navigating between pages in ASP.Net can be seamlessly achieved through the use of Server.Transfer, Response.Redirect, and Application

I have been working on implementing async features into an existing asp.net forms application, but I am facing challenges with page transfer and redirection. The issue arises from redirects/transfers being done from utility classes or custom controls, and ...

c#asp.netasync-awaitresponse.redirectserver.transfer

Input field in a tableview

I have a ListView that features a dropdown, 4 textboxes and buttons. My goal is to only show the fourth textbox (enclosed in a span) when the dropdown value in each row of the ListView is set to 2. For instance, if there are 5 records being displayed in t ...

javascriptasp.nethtmllistviewtextbox

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

htmlcsscss-grid

Using percentages to position Div elements

Currently, I am working on an HTML page that requires a div element spanning the full width of the page. My goal is to arrange other divs within this full-width div using percentages rather than pixels. The class associated with this div is .question. Thi ...

javascriptcss

What is the best way to automatically close a modal box after submitting a form?

Currently, I am utilizing the CSS modal box developed by Paul R. Hayes. More information about this can be found here - Within the modal box, I have integrated a form. This form is aimed at an iframe that remains concealed on the same page. My objective i ...

htmlcssforms

In Firefox, the scaling of svg masks is not functioning properly

Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE. Website: SVG File: CSS: -webkit-mask: url("../img/feelfilms-logo.svg#logo_mask"); mask ...

csssvgscalemask

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

Adding Data Definition Language (DDL) statements while making an AJAX call

Is there a way to automatically update the value of a drop-down list whenever a partial view is loaded via an AJAX call? Currently, the AJAX call successfully retrieves the necessary information, but the user still needs to manually change the location val ...

javascriptjqueryajaxasp.net-mvc

What is the process for setting an object's property as a href in an AJAX call?

I've got a quick query. How can I assign an object's property to the href attribute? I've indicated the line with a comment. success: function (listOfTags) { let tagData = ''; $.each(listOfTags, function (i, tag) { ...

htmljquerycssajaxhref

I'm experiencing some unusual behavior with the Windows media app when using HTML and CSS

I have a Windows Media Player box on my page, but it overlaps every piece of HTML code. How can I get it to move to the back so that I can still use it? Another problem is that everyone who visits my page needs a plugin to load it, even though most people ...

htmlcsswindowswindows-media-player

What is the process for installing and utilizing the custom CSSLint rules that I have developed for the command line interface?

After investing a significant amount of time into following the instructions outlined here and here for creating custom CSS linting rules using CSSLint via the CLI, I have successfully generated and tested my own set of rules. However, I am now facing the ...

cssnpminstallationlintcsslint

Using jQuery, disregard elements that are not hidden

Currently, I am working with a jQuery validator and I am attempting to utilize the ignore: ':hidden:not feature for all controls that contain an ID with " selecting" in it. Here is my current code snippet: sb.AppendLine(@" ignore: ':hidden: ...

c#jqueryasp.net

Creating dual modes (night/day) for your AngularJS application

Currently, I am in the process of developing a project with Angularjs and facing an obstacle with animations. My goal is to implement a feature in my application that allows it to display in two different modes - night mode and day mode. I have come ac ...

javascriptcssangularjssassangular-ui-router

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

javascripthtmlcss

How can I show the remaining paragraph text upon clicking a button in a responsive manner using CSS and JavaScript?

I want to add a nice animation effect to the height of my text when a button is clicked. I've managed to achieve this by setting a height: 30px with overflow: hidden initially, and then toggling a class with height: 300px. However, I'm facing an ...

javascripthtmlcss