Style de Validation des Données des Erreurs avec Bootstrap

Je suis en train de travailler sur un ASP.NET MVC 4 du Projet. Je veux le style de validation des données, les erreurs sur ma page de connexion avec Bootstrap 3.0. Quand je debug de la page et donne des données des erreurs de validation, ce sont les codes disparu dans la source de mon formulaire de connexion:

 <form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div>    <div class="form-group control-group">
   <div class="col-md-6 col-md-offset-3">
                <input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
                <span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
       </div>
        </div>
    <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
                <input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
                <span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
        </div>
    </div>
    <div class="form-group">
    <div class="col-md-4 col-md-offset-4">
        <button class="btn btn-default" type="submit">Giriş Yap</button>
        </div>
    </div>
</form>

Comment puis-je style de ces erreurs comme "pour=inputError" propriété de l'étiquette avec Bootstrap 3?

que voulez-vous dire like "for=inputError"?
Je veux dire que les exemples intitulé "états de validation" dans ce lien getbootstrap.com/css/#forms-control-states

OriginalL'auteur Kerem Zaman | 2013-11-06

  1. 17

    Comme il est montré dans Bootstrap de docs, vous avez besoin d'appliquer de la classe has-error à la div qui contient l'entrée et a la classe form-group:

    <div class="form-group has-error">
    ...
</div>

    C'est assez moche à écrire une condition pour chaque propriété que vous voulez vérifier et d'appliquer classe has-error selon les résultats de cette condition, si vous pouvez le faire comme ceci:

    <div class="form-group @(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">

    Il s'occupe de la partie serveur de validation. Cependant, il y a aussi la validation côté client que vous devez penser. Pour que tu avais besoin d'écrire un jQuery qui serait à vérifier l'existence de la classe field-validation-error et appliquer classe has-error en fonction du résultat.

    Vous pouvez tout faire vous-même, cependant, je suggère de vérifier TwitterBootstrapMVC qui le fait automatiquement pour vous. Tout ce que vous avez à écrire est:

    @Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)

    Disclaimer: je suis l'auteur de TwitterBootstrapMVC. En l'utilisant dans le Bootstrap 2 est gratuit. Pour Bootstrap 3, il nécessite une licence payante.

    OriginalL'auteur Dmitry