Ошибки проверки данных стиля с помощью Bootstrap

Я работаю над ASP.NET проект MVC 4. Я хочу стилизовать ошибки проверки данных на моей странице входа в систему с помощью 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>

Как я могу стилизовать эти ошибки, такие как" for=inputError " свойство label с Bootstrap 3?

9
asp.net-mvc-4 twitter-bootstrap twitter-bootstrap-3

1 ответов

как показано в документы Bootstrap, вам нужно применить класс has-error к div, который содержит вход и имеет класс form-group:

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

довольно некрасиво писать условие для каждого свойства, которое вы хотите проверить и применить class has-error в зависимости от результатов этого условия, хотя вы можете сделать это так:

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

это заботится о проверке на стороне сервера. Однако есть также проверка на стороне клиента, которую вам нужно подумать о. Для этого вам нужно написать jQuery, который проверит наличие класса field-validation-error и применить класс has-error в зависимости от результата.

вы можете сделать это все самостоятельно, но я предлагаю проверить TwitterBootstrapMVC что делает все это автоматически для вас. Все, что вам нужно написать, это:

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

отказ от ответственности: я автор TwitterBootstrapMVC. Использование его в Bootstrap 2 бесплатно. Для Bootstrap 3 требуется платный лицензия.

17