twitter-bootstrap
Bootstrap-validatie
Zoeken…
Opmerkingen
Deze validatietechniek kan alleen worden gebruikt voor invoer in een formulier.
Eigenschappen moeten ten minste één validatievereiste hebben om markering te tonen bij een mislukte validatie
onSubmit(). Gegevenstypen (anders dan tekenreeksen) hebben een vereiste voor verborgen gegevenstypes, dus er is geen expliciete gegevensaantekening vereist. Strings hebben dit niet, dus om een validatiecontrole samen met de andere velden af te dwingen, voegt u de gegevensaantekening[MinLengthAttribute(0)].
ASP.NET MVC en gegevensaantekeningen gebruiken
Voeg het volgende toe aan Web.config (in de map Views), binnen <appSettings> :
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
Voeg de jqueryval-bundel toe aan BundleConfig.cs:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jqueryval/jquery.validate*"));
Voeg het volgende toe aan alle pagina's die moeten worden gevalideerd (of _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>
Voeg gegevensaantekeningen toe aan de relevante velden in het model:
using System.ComponentModel.DataAnnotations;
[Required(ErrorMessage = "This field is required.")
Voeg in de weergave het volgende toe aan elke invoer die moet worden gevalideerd:
<!-- Validation messages -->
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeField)</div>
<!-- Bootstrap feedback span: -->
<span class="glyphicon form-control-feedback"></span>
Voeg het volgende toe aan de relevante controlleractie om server-side validatie toe te voegen:
if (!ModelState.IsValid)
{
return View(model);
}
else
{
// continue with action
}
Voorbeeldinvoer die validatie vereist
Model:
[Required(ErrorMessage = "This field is required.")
[StringLength(maximumLength: 10, ErrorMessage = "This field must be 10 characters or less.")]
public string SomeRequiredField { get; set; }
Visie:
<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>
Optioneel
Voeg de volgende jQuery toe om invoer bij vervaging en bij verzending te valideren:
$('input').on('blur', function () {
$(this).valid();
});