twitter-bootstrap
Sprawdzanie poprawności bootstrapu
Szukaj…
Uwagi
Tej techniki sprawdzania poprawności można używać tylko w przypadku danych wejściowych w formularzu.
Właściwości muszą mieć co najmniej jeden wymóg sprawdzania poprawności, aby wyświetlać wyróżnienie nieudanej
onSubmit()
. Typy danych (inne niż łańcuch) mają wymóg ukrytego typu danych, więc nie wymagają wyraźnej adnotacji danych. Ciągi tego nie mają, więc aby wymusić sprawdzenie poprawności wraz z innymi polami, dodaj adnotację danych[MinLengthAttribute(0)]
.
Korzystanie z ASP.NET MVC i adnotacji danych
Dodaj następujące elementy do pliku Web.config (w folderze Widoki) w obrębie <appSettings>
:
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
Dodaj pakiet jqueryval do BundleConfig.cs:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jqueryval/jquery.validate*"));
Dodaj następujące elementy do wszystkich stron wymagających weryfikacji (lub _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>
Dodaj adnotacje danych do odpowiednich pól w modelu:
using System.ComponentModel.DataAnnotations;
[Required(ErrorMessage = "This field is required.")
W widoku dodaj następujące elementy do każdego wejścia, które wymaga sprawdzenia:
<!-- Validation messages -->
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeField)</div>
<!-- Bootstrap feedback span: -->
<span class="glyphicon form-control-feedback"></span>
Dodaj następujące polecenie do odpowiedniej akcji kontrolera, aby dodać weryfikację po stronie serwera:
if (!ModelState.IsValid)
{
return View(model);
}
else
{
// continue with action
}
Przykładowe dane wejściowe wymagające weryfikacji
Model:
[Required(ErrorMessage = "This field is required.")
[StringLength(maximumLength: 10, ErrorMessage = "This field must be 10 characters or less.")]
public string SomeRequiredField { get; set; }
Widok:
<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>
Opcjonalny
Dodaj następujące jQuery, aby sprawdzić poprawność danych przy rozmyciu, a także przy wysyłaniu:
$('input').on('blur', function () {
$(this).valid();
});