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

Aslant

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);
        });
    }
}

Divulgence

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.

Dosh

Answer 3

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" />
}

Filariasis

Answer 4

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!

Goiter

Hello Merlin47, This is not client side validation. You are validating your data on the server side. In a client side validation, the data cannot be submited to the server. – Reachmedown

Unfortunately, this is server side validation. – Cypripedium

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

Minorca

Thanks, the server side validation errors show up just fine in the validation summary. However rather than having a text field appearing next to each box I would like to have the client side errors appearing in the validation summary as well. The control containing the error is still set to a red background so the user knows which control the error refers to. – Aslant

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.

Spacing