twitter-bootstrap
Convalida Bootstrap

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
Ricerca…


Osservazioni

  • Questa tecnica di convalida può essere utilizzata solo su input che si trovano all'interno di un modulo.

  • Le proprietà devono avere almeno un requisito di convalida per mostrare l'evidenziazione su una convalida onSubmit() fallita. I tipi di dati (diversi dalla stringa) hanno un requisito di tipo di dati nascosto, quindi non richiedono un'annotazione esplicita dei dati. Le stringhe non hanno questo, quindi per forzare un controllo di validazione insieme agli altri campi, aggiungi l'annotazione dei dati [MinLengthAttribute(0)] .

Utilizzo di ASP.NET MVC e annotazioni di dati

Aggiungere quanto segue a Web.config (nella cartella Views), in <appSettings> : 

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Aggiungi il bundle jqueryval a BundleConfig.cs: 

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jqueryval/jquery.validate*"));

Aggiungi quanto segue a tutte le pagine che necessitano di validazione (o _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>

Aggiungi annotazioni di dati ai campi rilevanti nel modello: 

using System.ComponentModel.DataAnnotations;

[Required(ErrorMessage = "This field is required.")

Nella vista, aggiungi quanto segue a ciascun input che deve essere convalidato: 

<!-- Validation messages -->
<div class="text-danger">@Html.ValidationMessageFor(m => m.SomeField)</div>

<!-- Bootstrap feedback span: -->
<span class="glyphicon form-control-feedback"></span>

Aggiungere il seguente all'azione del controller pertinente per aggiungere la convalida sul lato server: 

if (!ModelState.IsValid)
{
    return View(model);
}
else
{
    // continue with action
}

Esempio di input che richiede la convalida

Modello: 

[Required(ErrorMessage = "This field is required.")
[StringLength(maximumLength: 10, ErrorMessage = "This field must be 10 characters or less.")]
public string SomeRequiredField { get; set; }

Vista: 

<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>

Opzionale

Aggiungi il seguente jQuery per convalidare gli input su sfocatura, nonché su submit: 

$('input').on('blur', function () {
    $(this).valid();
});


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow