Bootstrap-3-Formular mit Input-Group-Addon-Wrapping-Fehlerlabels mit Jquery Validate

Verwenden von Bootstrap 3 mit einem horizontalen Formular unter Verwendung von form-group- und input-group-Tags mit Jquery-Validate. Wenn Jquery.Validate auf Fehler ausgeführt wird, hängt es eine Label-Fehlerkontrolle innerhalb der Eingabegruppe an.

Das Problem ist, dass input-group-addon in die nächste Zeile unter dem Formularfeld umbricht, wenn die Label-Fehlerkontrolle von Jquery Validate hinzugefügt wird.

AUSSICHT:
http://www.bootply.com/114554

Wie bekomme ich den Etikettenfehler, unter der Formularkontrolle zu bleiben und nicht das Input-Group-Addon in die nächste Zeile umbrechen?

Ja, diese Lösung ist mir bekannt – funktioniert hervorragend, richtet aber immer noch nicht das Fehlerlabel für form-horizontal aus: Bootstrap 3 mit jQuery Validation Plugin

Habe es anders gelöst:
http://www.bootply.com/2liEuyqrAb

Musste das Label außerhalb der Eingabegruppe verschieben. Nachdem dies geschehen war, trat das erwartete Verhalten auf: Formularbezeichnung nach links, Feld nach rechts und Fehler unter dem Feld.

Der einfachste Weg, Ihr Problem zu lösen, sollte darin bestehen, Ihr Fehlerlabel mit der absoluten Positionseigenschaft in CSS einzufügen. In Ihrem Beispiel ist hier das Ergebnis:

.text-danger {
    color: #a94442;
    position: absolute;
    width: 100%;
    top: 34px;
    line-height: 34px;
    left: 0px;


}

Ich gebe eine Lösung für diese Frage für einen anderen Benutzer, es ist das gleiche Problem.

Sie finden es hier. Bootstrap-3: Input Group-Addon STRETCHES mit jQuery-Validierungsmeldungen.

Ausgabe mit einfügen input-groupversuchen Sie den CSS-Fix oder den folgenden Code.

  $('.your-form').validate({
    errorPlacement: function ( error, element ) {
      if(element.parent().hasClass('input-group')){
        error.insertAfter( element.parent() );
      }else{
        error.insertAfter( element );
      }
    }
  });