twitter-bootstrap
Bootstrap Validation
Sök…
Anmärkningar
Denna valideringsteknik kan endast användas på ingångar som finns inom en form.
Egenskaper måste ha minst ett valideringskrav för att visa markering på en misslyckad
onSubmit()validering. Datatyper (annat än sträng) har ett doldt datatypskrav, så det krävs inte någon tydlig dataanmärkning. Strängar har inte det här, så för att tvinga fram en valideringskontroll tillsammans med de andra fälten, lägg till dataanmärkningen[MinLengthAttribute(0)].
Använda ASP.NET MVC och Data Annotations
Lägg till följande i Web.config (i mappen Visningar) inom <appSettings> :
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
Lägg till jqueryval-paketet till BundleConfig.cs:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jqueryval/jquery.validate*"));
Lägg till följande på alla sidor som behöver valideras (eller _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>
Lägg till kommentarer i de relevanta fälten i modellen:
using System.ComponentModel.DataAnnotations;
[Required(ErrorMessage = "This field is required.")
Lägg till följande i vyn i varje ingång som måste valideras:
<!-- Validation messages -->
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeField)</div>
<!-- Bootstrap feedback span: -->
<span class="glyphicon form-control-feedback"></span>
Lägg till följande i den relevanta controlleråtgärden för att lägga till validering på serversidan:
if (!ModelState.IsValid)
{
return View(model);
}
else
{
// continue with action
}
Exempelinmatning som kräver validering
Modell:
[Required(ErrorMessage = "This field is required.")
[StringLength(maximumLength: 10, ErrorMessage = "This field must be 10 characters or less.")]
public string SomeRequiredField { get; set; }
Se:
<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>
Valfri
Lägg till följande jQuery för att validera inmatningar på oskärpa samt för att skicka:
$('input').on('blur', function () {
$(this).valid();
});