Alex Rivera | Logout

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

Asked 2011-03-01T04:33:06.213
15

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:

After submit

Thanks,

b3n

Edit
Report

2 Answers

6

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.

answered 2012-12-22T23:29:52.680
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!

answered 2012-12-05T21:37:50.527

Your Answer