Validationsummary and Validationmessagefor with Custom CSS Shown When No Errors Present

ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

There are already built in css types for these:

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

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

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

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

in the default css file for MVC3 projects. These are shown appropriately based on if the ModelState has any errors for the Property specified or any at all for ValidationSummary. If no errors are present in the ModelState then the display:none; from .field-validation-valid will hide the errors.

Validation errors are always displayed

As I have commented one solution is to add the following css:

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

But another way is to check if there are errors in your view then display:

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
    @Html.ValidationSummary(false, "Please fix the errors:", new { @class = "text-danger" })    
}

Validation Summary working but Individual Validation Messages are Not working

Not sure what you validation summary helper looks like but I can quess that you pass "true" value to the helper like that

@Html.ValidationSummary(true)

This will exclude all properies erros from the summary according to MSDN:

true to have the summary display model-level errors only, or false to
have the summary display all errors.

Could you please elaborate more on what exactly JQuery files you've added and what changes you've made to the web.config?

Didn't you forget to include the JQuery files into the application via bundles or script tag?

@Html.ValidationMessageFor() custom validationMessage always shown

Have you tried the CSS from this question?

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

How to display only one error message using Html.ValidationSummary?

The ValidationExtensions.ValidationSummary method will always return an un-ordered list of items.

Another person asked this question and choose to use JQuery to hide the items:
https://stackoverflow.com/a/10837702/1220302

Another solution you could do is only display the first item in the list using CSS's nth-child pseudo tag. This of course is dependent on the browser version you're using though:

I think something like this:

.validation-summary-errors ul li:nth-child(-n+1) {
    display:none;
}

Error when customize ValidationMessageFor

Make sure you have brought the namespace into which the original ValidationMessageFor helper is defined into scope by adding the following to your using directives:

using System.Web.Mvc.Html;

ASP.NET MVC Html.ValidationSummary(true) does not display model errors

I believe the way the ValidationSummary flag works is it will only display ModelErrors for string.empty as the key. Otherwise it is assumed it is a property error. The custom error you're adding has the key 'error' so it will not display in when you call ValidationSummary(true). You need to add your custom error message with an empty key like this:

ModelState.AddModelError(string.Empty, ex.Message);

How do you stop ValidationMessageFor displaying an error message on load?

This project was created as an empty MVC app and I deleted the site.css and started again.
You can't do this if you want the validation to work as there is vital css in main.css that hides the messages!

Doh!!

---

Related Topics