Client Validation Not Displaying a Message

Question

I have an MVC4 internet application with a form for creating user accounts. Validation of the form works, but until the input has passed the verification, an error message is not displayed. It still prevents sending until the validation problem is resolved, but the text is missing

Shaver View Form

<h2>Create New Account</h2> <fieldset> <legend></legend> @using (Html.BeginForm("CreateUser",null)){ @Html.AntiForgeryToken() <table class="create"> <tr> <td colspan="2"><b>New Account</b> </tr> <tr> <td>@Html.DisplayNameFor(model=>model.UserName)</td><td>@Html.TextBoxFor(model=>model.UserName)</td> <td>@Html.DisplayNameFor(model=>model.EmailAddress)</td><td>@Html.TextBoxFor(model=>model.EmailAddress)</td> <td><input type="submit" value="Create User" /></td> </tr> </table> } </fieldset> @Html.ValidationSummary() 

Used packages include validation files

 bundles.Add(new ScriptBundle("~/bundles/asset").Include( "~/Scripts/jquery-{version}.js", "~/Scripts/jquery-ui-{version}.js", "~/Scripts/jquery.validate*", "~/Scripts/jquery.unobtrusive*")); 

The model used is an entity model, I added a partial class to annotate the validation requirements.

 [MetadataType(typeof(UserProfileMetadata))] public partial class UserProfile { //Empty Class just required for adding class level attribute } public class UserProfileMetadata { //Fields from user profile requiring annotations [EmailAddress] [Required] [Display(Name = "Email Address")] public string EmailAddress { get; set; } [Required] public string UserName { get; set; } } 

A health check, but now displaying the message makes me think that it should be a markup error, but I just do not see it.

Answer 1

Moving the ValidationSummary parameter inside the form will be fixed.

 <h2>Create New Account</h2> <fieldset> <legend></legend> @using (Html.BeginForm("CreateUser",null)){ @Html.ValidationSummary() @Html.AntiForgeryToken() <table class="create"> <tr> <td colspan="2"><b>New Account</b> </tr> <tr> <td>@Html.DisplayNameFor(model=>model.UserName)</td> <td>@Html.TextBoxFor(model=>model.UserName)</td> <td>@Html.DisplayNameFor(model=>model.EmailAddress)</td><td>@Html.TextBoxFor(model=>model.EmailAddress)</td> <td><input type="submit" value="Create User" /></td> </tr> </table> } </fieldset> 

Answer 2

For those who stumble upon this, who do not want to limit themselves to moving @Html.ValidationSummary into a form, that is, he lives in _Layout.cshtml, and you like it there, here's the way around it.

This method is apparently used by Microsoft to populate @Html.ValidationSummary . It has a standard form, it looks for data-valmsg-summary-true in $('this') . this in this case is the calling form. Well, my @Html.ValidationSummary lives in pageBody <div> on _Layout.cshtml so that it is DRY.

 function onErrors(event, validator) { // '#pageBody' is the containing element var container = $('#pageBody').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); }); } } 

So far, I have only changed this:

 var container = $('this').find("[data-valmsg-summary=true]") 

:

 var container = $('#pageBody').find("[data-valmsg-summary=true]") 

Now I start the test by clicking the button. To run onErrors(event, validator) , I used the following jQuery:

  $('#btnSave').click(function () { if ($('form').valid()) { // Do stuff } else { onErrors(event, $('form').data('validator')); } }); 

Voila, @ Html.ValidationSummary is populated even when using jQuery.unobtrusive.

Many thanks to Leniel Macaferi for pointing me in the right direction: http://www.leniel.net/2013/08/customizing-aspnet-mvc-html-validation-summary-with-bootstrap-3-panel.html # sthash.jGRguVuV.qSjYUlhS.dpbs