Wie verwende ich Twitter Bootstrap-Popover für Benachrichtigungen zur jQuery-Validierung?

Ich kann Popovers mit Bootstrap leicht genug anzeigen lassen und ich kann auch Validierungen mit dem Standard- Plugin für die jQuery-Validierung oder der jQuery-Validierungs-Engine durchführen , aber ich kann nicht herausfinden, wie man sie ineinander überführt.

Ich denke, was ich brauche, ist ein Hook, der vom Validator aufgerufen wird, wenn er eine Benachrichtigung anzeigen möchte. Geben Sie ihm einen Abschluss, der die Nachricht und das Zielelement an ein Popover weiterleitet. Dies scheint eine Art Abhängigkeitsinjektion zu sein.

Theoretisch alles schön, aber ich kann einfach nicht herausfinden, wo sich dieser Hook befindet oder ob einer in einer der Validierungs-Engines vorhanden ist. Beide scheinen darauf bedacht zu sein, die Verantwortung für die Anzeige von Benachrichtigungen mit allen Arten von ausgefeilten Optionen für Platzierung, Wrapper und Stile zu übernehmen, wenn ich nur die Fehlertypen (ich brauche nicht unbedingt den Nachrichtentext) und das Element, auf das sie sich beziehen, suche zu. Ich habe Hooks für das gesamte Formular gefunden, nicht für die einzelnen Benachrichtigungen.

Ich bevorzuge Validierungssysteme, die Klassen zum Definieren von Regeln verwenden, da sie gut mit dynamisch erstellten Formularen spielen.

Hat jemand eine Lösung oder eine bessere Idee?

Schauen Sie sich die Optionenhighlight und showErrors jQuery Validator an . Mit diesen Optionen können Sie Ihre eigenen benutzerdefinierten Fehlerhervorhebungen einbinden, die Bootstrap-Popover auslösen.

Dies ist ein praktisches Beispiel:

$('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); 
    }
});

Es werden keine Bootstrap-Popover verwendet, aber es sieht wirklich gut aus und ist leicht zu erreichen.

AKTUALISIEREN

Um eine Popover-Validierung zu erhalten, können Sie diesen Code verwenden:

$("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");
    });
  }
});

Sie bekommen so etwas:

Schauen Sie sich die jsFiddle an .

Chris Fulstow hatte es richtig gemacht, aber es hat noch eine Weile gedauert, also hier ist der vollständige Code:

Dies zeigt das Popover bei einem Fehler an und verbirgt die Standardfehlerbezeichnungen:

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

Dadurch wird das Popover eingerichtet. Das einzige, was Sie dafür brauchen, ist Trigger: 'manuell'

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

Die an Popover übergebenen Titel- und Inhaltsattribute funktionierten nicht, daher habe ich sie in meiner # Passwort-Eingabe mit Dateninhalt = 'Mindestens 5 Zeichen' und Daten-Originaltitel = 'Ungültiges Passwort' inline angegeben. Sie benötigen außerdem rel = 'popover' in Ihrem Formular.

Dies funktioniert, aber der Popover flackert, wenn die Auswahl aufgehoben wird. Irgendeine Idee, wie man das behebt?

Hier ist eine Fortsetzung des hervorragenden Vorschlags von Varun Singh, der verhindert, dass das "Flimmern" der Validierung ständig versucht, "zu zeigen", obwohl das Popup bereits vorhanden ist. Ich habe einfach ein Fehlerstatus-Array hinzugefügt, um zu erfassen, welche Elemente Fehler anzeigen und welche nicht. Klappt wunderbar!

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'
});

Diese jQuery-Erweiterung für das jQuery Validation Plugin (getestet mit Version 1.9.0) reicht aus.

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

Dies fügt auch einige Rails-esk-Fehlermeldungen hinzu.

Ich ziehe es vor, das CSS von Bootstrap zu ändern. Fügen Sie einfach die Klassen von jQuery validate an der richtigen Stelle hinzu. Feldvalidierungsfehler und Eingabevalidierungsfehler

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

So habe ich es mit Bootstrap 2.x und jQuery Validate 1.9 gemacht

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});

Bitte schauen Sie sich Folgendes an:
- https://gist.github.com/3030983
Ich denke, es ist das einfachste von allen.

BEARBEITEN

Code vom Link:

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _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>'
            });

            _popover.data('popover').options.content = value.message;

            $(value.element).popover('show');

        });

    }

});

Vielen Dank für das Heads Up! Hier ist meine Version für Bootstrap, aber mit Tooltips. Meiner Meinung nach ist es eleganter als Popovers. Ich weiß, dass die Frage für Popover war, also stimmen Sie aus diesem Grund bitte nicht ab. Vielleicht wird es jemandem so gefallen. Ich liebe es, wenn ich nach etwas suche und neue Ideen für Stackoverflow gefunden habe. Hinweis: Es ist kein Markup auf dem Formular erforderlich.

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


            $.each(errorList, function (index, value) {

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    }); 

So habe ich es geschafft. Es sind jedoch zwei Änderungen am Validierungsskript erforderlich (ich habe hier den Code für Bootstrap 1.4 erhalten und ihn dann geändert - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- for-twitter-bootstrap / )

Mein Aufruf zur Bestätigung:

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

Dann müssen Sie zwei Dinge in jquery.validate.js ändern.
1. Wenden Sie diesen Fix an - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. Erstellen Sie nach Zeile 647 (in der Funktion showLabel den Etikettenteil ) nach Zeile Zeile .addClass(this.settings.errorClass)hinzufügen: .addClass("help-inline")
Jemand kann vielleicht einen Weg finden, den zweiten Fix in der Validierungsfunktion anzuwenden, aber ich habe keinen Weg gefunden, da showLabel nach Hervorhebung aufgerufen wird.

Dies ist, was ich in meine Validierung eingefügt habe, um den Twitter Bootstrap-Richtlinien zu entsprechen. Die Fehlerüberprüfungsnachricht wird in a <span class=help-inline>eingefügt und wir möchten den äußeren Container als erroroder hervorheben success:

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}

Hier ist ein Update zu Kenny Meyers ausgezeichneter Antwort oben . Es gab einige Probleme, die verhindert haben, dass es für mich funktioniert, die ich in diesem Ausschnitt angesprochen habe:

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }

Ich bin mir nicht sicher, ob dies für die Diskussion relevant ist, da im Originalposter nach Hooks zum Ein- / Ausblenden von Bootstrap-Popovers gefragt wurde.

Ich suchte nach einer einfachen Validierung und Popovers spielten keine Rolle. Ein verwandter Beitrag und der erste in den Google-Suchergebnissen wurden bereits als Duplikat dieser Frage markiert. Daher war es sinnvoll, das ausgezeichnete jqValidation JS von @ ReactiveRaven zu erwähnen, das treffend als jqBootstrapValidation bezeichnet wird und gut mit Twitter Bootstrap harmoniert. Die Einrichtung dauert nur wenige Minuten. Laden Sie hier .

Hoffe das schafft Mehrwert.

tl; dr vermeiden , um explizite popovers aufzuzählen durch eine Hash - Tabelle mit den IDs der Elemente zu speichern, und die Schaffung von popovers on-the-fly (Mashup Jeffrey Gilbert und Kenny Meyers Ansätze).

Hier ist mein nehmen, die das Flackern Problem von anderen erwähnt behebt, aber im Gegensatz zu @Jeffrey Gilberts Antwort, verwendet keine Liste ( errorStates) , sondern verwendet eine Fehler Karte . Hash-Karten FTW. Ich denke, ich erinnere mich, dass ich irgendwo gelesen habe, dass jedes Problem in CS mit einer Hash-Map gelöst werden kann :)

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = 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>"
        });
        _popover.data("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

Vielen Dank an alle anderen, die Ideen dazu gepostet haben.

Schau dir das an: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

Es zeigt, wie Bootstrap-Popover-CSS anstelle von JS verwendet wird. Das Popup der JS-Methode verursacht ein blinkendes Problem.

Wenn Sie den obigen Kenny Meyer-Code für Popups verwenden, beachten Sie, dass Regeln, die den Inhalt eines Felds überprüfen, aber nicht erforderlich sind, z. B. eine gültige URL, dazu führen, dass das Popup beim Löschen des Felds nicht verschwindet. Siehe unten onkeyup für die Lösung. Wenn jemand eine bessere Lösung hat, bitte posten.

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }