twitter-bootstrap
Проверка бутстрапа
Поиск…
замечания
Этот метод валидации можно использовать только на входах, которые находятся внутри формы.
Свойства должны иметь хотя бы одно требование проверки, чтобы показывать выделение при неудачной
onSubmit(). Типы данных (кроме строки) имеют требование скрытого типа данных, поэтому не требуют явной аннотации данных. Строки не имеют этого, поэтому для принудительной проверки проверки вместе с другими полями добавьте аннотацию данных[MinLengthAttribute(0)].
Использование ASP.NET MVC и аннотации данных
Добавьте в Web.config (в папке Views) <appSettings> : <appSettings> :
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
Добавьте пакет jqueryval в BundleConfig.cs:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jqueryval/jquery.validate*"));
Добавьте все страницы, требующие проверки (или _Layout.cshml):
<!-- Reference to the jqueryval bundle -->
@Scripts.Render("~/bundles/jqueryval")
<!-- jQuery to apply bootstrap validation classes and glyphicons to inputs -->
<script type="text/javascript">
$.validator.setDefaults({
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback'); // red highlighting
$(element).closest('.form-group').find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove'); // red cross glyphicon
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback'); // green highlighting
$(element).closest('.form-group').find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok'); // green tick glyphicon
}
});
</script>
Добавьте аннотации данных в соответствующие поля в модели:
using System.ComponentModel.DataAnnotations;
[Required(ErrorMessage = "This field is required.")
В представлении добавьте следующее для каждого ввода, который требует проверки:
<!-- Validation messages -->
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeField)</div>
<!-- Bootstrap feedback span: -->
<span class="glyphicon form-control-feedback"></span>
Добавьте дополнение к соответствующему действию контроллера для добавления проверки на стороне сервера:
if (!ModelState.IsValid)
{
return View(model);
}
else
{
// continue with action
}
Пример ввода, требующий проверки
Модель:
[Required(ErrorMessage = "This field is required.")
[StringLength(maximumLength: 10, ErrorMessage = "This field must be 10 characters or less.")]
public string SomeRequiredField { get; set; }
Посмотреть:
<div class="form-group has-feedback">
<div class="col-md-4">
@Html.LabelFor(m => m.SomeRequiredField, new { @class = "control-label" })
</div>
<div class="col-md-8">
@Html.TextBoxFor(m => m.SomeRequiredField, new { @class = "form-control" })
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeRequiredField)</div>
<span class="glyphicon form-control-feedback"></span>
</div>
</div>
Необязательный
Добавьте следующий jQuery для проверки входов при размытии, а также для отправки:
$('input').on('blur', function () {
$(this).valid();
});