web-dev-qa-db-fra.com

Comment afficher les résultats de validation côté client de MVC 3 dans un résumé de validation

J'ai un formulaire d'enregistrement sur lequel j'utilise la validation côté client (Requis, StringLength, etc. spécifié sur mon modèle de vue). Le formulaire correspond à peu près à la façon dont l'échafaudeur le crée:

@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>
}

La seule différence est que j'ai déplacé ValidationMessageFor en haut à droite sous le ValidationSummary.

Ce que je voudrais faire, c'est afficher les erreurs de validation côté client dans le résumé de validation. Actuellement, ils sont simplement affichés en haut du formulaire mais n'utilisent pas le résumé de validation. Comment afficher les erreurs de validation côté client à l'aide du récapitulatif de validation? Est-ce seulement possible?

Mise à jour

Darin, j'ai utilisé votre code dans un nouveau projet et voici à quoi ça ressemble pour moi lorsque la validation côté client démarre:

Validation côté client http://i56.tinypic.com/i3f320.jpg

Je pensais que cela figurerait dans le résumé de validation avec les styles de résumé de validation appliqués. J'ai également soumis le formulaire qui ressemble alors à ceci:

Après avoir soumis http://i55.tinypic.com/2hqcowh.jpg

Merci,

b3n

asp.net-mvcasp.net-mvc-3asp.net-mvc-2-validationvalidationsummary
14
b3n

Cet article semble expliquer comment ajouter un résumé de validation côté client dans le résumé de validation:

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

Cependant, je ne l'ai pas testé par moi-même et il ne semble pas y avoir de différence avec votre code. Si cela ne fonctionne pas, un bon point à regarder pourrait être le fichier jquery.validate.unobtrusive.js sur une fonction qui place les erreurs de validation:

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

J'ai résolu le problème dans mon projet.

  1. ajouter la clé ci-dessous dans le fichier de configuration

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

  1. Ajoutez le code ci-dessous dans la page HTML où vous souhaitez afficher le résumé de validation

    @Html.ValidationSummary(false)

  2. Supprimez toutes les lignes @ Html.ValidationFor de la vue.

6
AzizKapProg

D'après ce que je peux voir dans votre exemple de code, vous avez deux Html.ValidationSummary dans le formulaire. Le premier prend comme argument true, ce qui signifie qu'il exclut toutes les erreurs de propriété. Le second prend false et fonctionne pour les erreurs de validation côté client et côté serveur. Exemple:

Modèle:

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

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

Manette:

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

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

Vue:

@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" />
}
4
Darin Dimitrov

j'ai résolu ce problème après 2 jours d'intenses recherches et, enfin, j'ai trouvé la réponse par moi-même et mes expérimentations!

Pour afficher le message du validateur côté client dans le résumé du validateur, il suffit de 3 étapes simples:

1- Mettez <add key="ClientValidationEnabled" value="false" /> dans la section <appSettings> de votre web.config

2- Ajoutez votre validation le "faux" attribut dans votre vue: @Html.ValidationSummary(false)

3- Supprimez toutes les ValidationMessageFor(x => x.Property) de votre vue.

lorsque vous cliquerez sur le bouton d'envoi, le message de validation côté client s'affichera dans votre récapitulatif de validation.

Prendre plaisir!

4
Merlin47

Les messages d'erreur de validation sont normalement affichés par défaut dans le récapitulatif de validation. Le composant ValidationFor devrait normalement accompagner le contrôle qui provoque l'erreur de validation afin d'indiquer clairement quel contrôle doit être mis à jour

1
Martin Booth

J'ai eu le même problème. Je l'ai corrigé en m'assurant que les scripts suivants étaient inclus dans ma page:

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

J'espère que cela vous convient aussi.

0
Logan the guide