twitter-bootstrap
Bootstrap-validatie

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


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow