Validation discrète et boutons radio ASP.NET MVC 3
Je suis en train de faire requis pour la validation d'une liste de boutons radio pour forcer l'utilisateur à sélectionner une option pour continuer. La validation ne fonctionne pas mais il ne renvoie métadonnées sur le premier bouton radio et il ne marque le premier bouton radio avec la classe d'entrée à une erreur de validation.
Exemple:
<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionOne)</p>
<p>@Html.RadioButtonFor(x => x.Choices, SomeEnum.OptionTwo)</p>
HTML résultant:
<p><input class="input-validation-error" data-val="true" data-val-required="required text" type="radio" name="Choices" value="OptionOne" /></p>
<p><input type="radio" name="Choices" value="OptionTwo" /></p>
Je veux les deux boutons radio pour obtenir l'erreur de validation de classe ou il risquerait de biaiser les options que l'utilisateur sélectionne.
Que puis-je faire?
source d'informationauteur zidar
Vous devez vous connecter pour publier un commentaire.
Veuillez noter que le comportement attendu de le code suivant
est
Pourquoi? parce que
Html.SomethingFor(model => model.Property)
est destiné à générer un élément html pour une propriété particulière. La façon dont vous l'utiliser pour créer plus d'un élément à partir d'une propriété n'est pas correct.De plus, regardez les identificateurs de ces 3 boutons radio. Ils sont quasiment la même, nah? Est-il acceptable d'avoir des éléments avec le même Id sur une page html? Absolument pas! Donc quelque chose qui doit être corrigé.
Bien que je pensais que la résolution de ce problème est facilité par le développement d'une nouvelle Extension Html Méthodes (référence 2), j'ai essayé de le résoudre d'une autre manière (parce que je suis têtu!).
Tout d'abord, Nous avons besoin de changer le code razor:
Puis, un morceau de JavaScript/jQuery magique pour résoudre notre problème:
À tout moment le premier bouton radio soulève une erreur de validation, ce code JavaScript s'applique erreur de classe css (
input-validation-error
) à l'élément parent de boutons radio, qui est un<div>
élément.Et le moment de la validation de l'erreur disparaît (en cliquant sur l'un des bouton radio-éléments), le style d'erreur est supprimée à partir de l'élément parent.
Il fonctionne très bien sous IE et FF, mais malheureusement ne fonctionne pas sur Chrome. La raison en est Chrome ne prend pas en charge
DOMAttrModified
événement. On peut le fixer à l'aide de cette solution: https://stackoverflow.com/a/10466236/538387 , mais peut-être un peu plus tard.Nouveau, je crois que nous avons besoin de développer une Extension HTML de Méthode ou de l'amélioration et l'utilisation d'un EditorTemplate comme ceci: https://gist.github.com/973482
Références:
Cela peut être réalisé à l'aide de la
showErrors
rappel:Ce que j'ai fait a été désactivé le css pour que la case d'option et afficher uniquement le message d'erreur.
(pas sûr IE aime ce)