twitter-bootstrap
Bootstrap Validation

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
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();
});


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow