web-dev-qa-db-ja.com

Bootstrap）を使用したデータ検証エラーのスタイリング

ASP.NET MVC4プロジェクトに取り組んでいます。ログインページのデータ検証エラーをBootstrap 3.0でスタイル設定したい。ページをデバッグしてデータ検証エラーが発生すると、このコードはログインフォームのソースに表示されなくなります。

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

Bootstrap 3）のラベルの「for = inputError」プロパティのように、これらのエラーのスタイルを設定するにはどうすればよいですか？

asp.net-mvc-4twitter-bootstraptwitter-bootstrap-3
9
Kerem Zaman

Bootstrapのドキュメント に示されているように、入力を含み、クラスhas-errorを持つdivにクラスform-groupを適用する必要があります。

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

チェックするプロパティごとに条件を記述し、その条件の結果に応じてクラスhas-errorを適用するのは非常に醜いですが、次のように行うことができます。

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

これにより、サーバー側の検証が処理されます。ただし、考慮する必要のあるクライアント側の検証もあります。そのためには、クラスfield-validation-errorの存在をチェックし、結果に応じてクラスhas-errorを適用するjQueryを作成する必要があります。

あなたはそれをすべて自分で行うことができますが、私はチェックアウトすることをお勧めします TwitterBootstrapMVC これはあなたのためにすべてを自動的に行います。あなたが書かなければならないのは：

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

免責事項：私はTwitterBootstrapMVCの作者です。 Bootstrap 2は無料です。Bootstrap 3の場合、有料ライセンスが必要です。

17
Dmitry