How to display MVC 3 client side validation results in validation summary

Question

I have a registration form on which I use client side validation (Required, StringLength etc. specified on my view model). The form is currently pretty much how the scaffolder creates it:

@using (Html.BeginForm("Index", "Registration"))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Registration details</legend>
        @Html.ValidationSummary(false, "Please correct these errors:")
        @Html.ValidationMessageFor(model => model.Username)
        <div class="editor-label">
            @Html.LabelFor(model => model.Username)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Username)
        </div>
        <p>
            <input type="submit" value="Register" />
        </p>
    </fieldset>
}

The only difference is that I moved the ValidationMessageFor to the top right beneath the ValidationSummary.

What I would like to do is display the client side validation errors in the validation summary. Currently they are just displayed on top of the form but not using the validation summary. How can I display client side validation errors using the validation summary? Is this even possible?

Update

Darin I have used your code in a new project and this is what it looks like for me when the client side validation kicks in:

Client side validation http://tinypic.com/images/404.gif

I expected this to be shown IN the validation summary with the validation summary styles applied. I also submitted the form which then look like this:

Thanks,

b3n

Answer 1

This article seems to explain how add client side validation summary into the validation summary:

http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

However I did not test it by myself and it does not seem to have any difference with your code. If it does not work a good point to look might be jquery.validate.unobtrusive.js file on a function that actually places validation errors:

function onErrors(form, validator) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors")
          .removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message).appendTo(list);
        });
    }
}

Answer 2

I resolved the issue in my project.

1. add below key in configuration file

<add key="ClientValidationEnabled" value="true"/>

1. Add below code in html page where you want to display validation summary

   @Html.ValidationSummary(false)

2. Remove all @Html.ValidationFor lines from the view.

Answer 3

i have solved this problem after 2 day of intense research, and finaly, i found the answer by myself and my experimentations !

To display the Client-side Validator message in the validator Summary there is 3 easy step :

1- put <add key="ClientValidationEnabled" value="false" /> in the <appSettings> section of your web.config

2- add your validation the "false" attribut in your view : @Html.ValidationSummary(false)

3- Remove all ValidationMessageFor(x => x.Property) in your view.

when you,ll click in your submit button, the client-side Validation message will be displayed in your validation summary.

Enjoy!

Answer 4

From what I can see in your sample code you have two Html.ValidationSummary inside the form. The first one takes true as argument meaning that it excludes all property errors. The second one takes false and works for both client side and server side validation errors. Example:

Model:

public class MyViewModel
{
    [Required]
    [StringLength(5)]
    public string Username { get; set; }

    [Required]
    public string Name { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

View:

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(false, "Please correct these errors:")

    @Html.ValidationMessageFor(model => model.Username)
    @Html.ValidationMessageFor(model => model.Name)

    @Html.LabelFor(model => model.Username)
    @Html.EditorFor(model => model.Username)

    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)

    <input type="submit" value="Register" />
}

Answer 5

The validation error messages are normally shown as part of the validation summary by default. The ValidationFor should normally go along side the control which causes the validation error in order to make it clear which control needs to be updated

Answer 6

I had this same issue. I fixed it by making sure the following scripts were included in my page:

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")

I hope it does the trick for you, too.