La convalida del client non mostra il messaggio

Question

Possiedo un'applicazione Internet MVC4 con un modulo per la creazione di account utente. La convalida del modulo funziona ma mentre l'input non riesce la convalida non viene visualizzato alcun messaggio di errore. Previene ancora presentando fino a quando il problema di convalida è risolto, ma non c'è alcun testo

Razor Visualizza modulo

<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() 

I fasci utilizzati includere i file di convalida

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

Il modello utilizzato è un modello di entità , Ho aggiunto una classe parziale per annotare i requisiti di convalida

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

} 

La convalida funzionante ma che ora mostra il messaggio mi fa pensare che debba essere un errore di markup ma non riesco a vederlo.

Answer 1

Lo spostamento del ValidationSummary all'interno del modulo lo risolverà.

<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

Per chiunque imbattersi in questo che non vuole essere limitato a spostare il @Html.ValidationSummary nella forma, cioè vive in _Layout.cshtml, e ti piace lì, ecco un modo per aggirare questo.

Il metodo riportato di seguito è apparentemente quello che viene utilizzato da Microsoft per popolare @Html.ValidationSummary. Nella sua forma standard, cerca data-valmsg-summary-true in $('this'). this in questo caso è il modulo di chiamata. Bene, il mio @Html.ValidationSummary vive nello pageBody<div> su _Layout.cshtml per tenerlo ASCIUTTO.

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

Finora, ho cambiato solo questo:

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

a questo:

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

Ora, attivare gli convalida da un clic del pulsante. Per arrivare onErrors(event, validator) a sparare, ho usato il seguente jQuery:

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

Voila, @ Html.ValidationSummary popola anche quando si utilizza jQuery.unobtrusive.

Un grande grazie a Leniel Macaferi per avermi nella giusta direzione qui: http://www.leniel.net/2013/08/customizing-aspnet-mvc-html-validation-summary-with-bootstrap-3-panel.html#sthash.jGRguVuV.qSjYUlhS.dpbs