twitter-bootstrap
Validation bootstrap

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


Remarques

  • Cette technique de validation ne peut être utilisée que sur des entrées figurant dans un formulaire.

  • Les propriétés doivent avoir au moins une exigence de validation pour afficher la mise en évidence sur une validation onSubmit() échouée. Les types de données (autres que string) ont une exigence de type de données masquée, donc ne nécessitent pas d'annotation de données explicite. Les chaînes ne disposent pas de cette [MinLengthAttribute(0)] , donc pour forcer une vérification de validation avec les autres champs, ajoutez l'annotation de données [MinLengthAttribute(0)] .

Utilisation d'ASP.NET MVC et d'annotations de données

Ajoutez ce qui suit à Web.config (dans le dossier Views), dans <appSettings> : 

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

Ajoutez le bundle jqueryval à BundleConfig.cs: 

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

Ajoutez ce qui suit à toutes les pages nécessitant une validation (ou _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>

Ajoutez des annotations de données aux champs pertinents du modèle: 

using System.ComponentModel.DataAnnotations;

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

Dans la vue, ajoutez ce qui suit à chaque entrée nécessitant une validation: 

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

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

Ajoutez ce qui suit à l'action de contrôleur appropriée pour ajouter une validation côté serveur: 

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

Exemple de saisie nécessitant une validation

Modèle: 

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

Vue: 

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

Optionnel

Ajoutez le jQuery suivant pour valider les entrées sur le flou, ainsi que sur submit: 

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


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow