Comment utiliser les popovers Twitter Bootstrap pour les notifications de validation jQuery ?

Question

Je peux faire apparaître des popovers en utilisant bootstrap assez facilement, et je peux aussi faire des validations en utilisant le standard Plugin de validation jQuery ou le Moteur de validation jQuery mais je n'arrive pas à trouver comment alimenter l'un dans l'autre.

Je pense que ce dont j'ai besoin est un crochet qui est appelé par le validateur quand il veut afficher une notification, lui donner une fermeture qui passe le message et l'élément cible à un popover. Cela ressemble à une sorte d'injection de dépendance.

Tout cela est bien beau en théorie, mais je n'arrive pas à savoir où se trouve ce crochet, ni même s'il existe dans l'un ou l'autre des moteurs de validation. Ils semblent tous deux vouloir prendre la responsabilité d'afficher les notifications avec toutes sortes d'options élaborées pour le placement, les enveloppes, les styles, alors que tout ce que je veux, c'est le(s) type(s) d'erreur (je n'ai même pas nécessairement besoin du texte du message) et l'élément auquel il se rapporte. J'ai trouvé des crochets pour le formulaire entier, pas pour les notifications individuelles.

Je préfère de loin les systèmes de validation qui utilisent des classes pour définir les règles, car ils s'adaptent bien aux formulaires créés dynamiquement.

Quelqu'un a une solution ou une meilleure idée ?

Answer 1

Il s'agit d'un exemple concret :

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

Il n'utilise pas vraiment les popovers de bootstrap, mais il est très joli et facile à réaliser.

UPDATE

Donc, pour avoir la validation du popover vous pouvez utiliser ce code :

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      return $(value).popover("hide");
    });
    return $.each(errorList, function(index, value) {
      var _popover;
      _popover = $(value.element).popover({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

Vous obtenez quelque chose comme ça :

Consultez le jsFiddle .

Answer 2

Jetez un coup d'œil à la highlight y showErrors Options du validateur jQuery Ces derniers vous permettront d'intégrer vos propres mises en évidence d'erreurs personnalisées qui déclenchent des popovers Bootstrap.

Answer 3

Chris Fulstow avait raison, mais ça m'a quand même pris du temps, alors voici le code complet :

Ceci montre le popover sur l'erreur, et cache les étiquettes d'erreur par défaut :

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

Cela met en place le popover. La seule chose dont vous avez besoin est trigger : 'manual'.

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

Les attributs title et content passés dans le popover ne fonctionnaient pas, je les ai donc spécifiés en ligne dans mon entrée #password avec data-content='Minimum 5 characters' et data-original-title='Invalid Password'. Vous avez également besoin de rel='popover' dans votre formulaire.

Cela fonctionne, mais le popover clignote lors de la désélection. Avez-vous une idée de la façon de corriger ce problème ?

Answer 4

Voici une suite à l'excellente suggestion de Varun Singh qui permet d'éviter le problème de "scintillement" de la validation qui essaie constamment de "s'afficher" alors que la popup est déjà présente. J'ai simplement ajouté un tableau d'états d'erreur pour capturer les éléments qui montrent des erreurs et ceux qui n'en montrent pas. Cela fonctionne à merveille !

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

Answer 5

Cette extension jQuery pour le plugin jQuery Validation (testé avec la version 1.9.0) fera l'affaire.

https://github.com/tonycoco/rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js

Cela permet également d'ajouter des messages d'erreur Rails-esk.