Fehlerhafte Platzierung der Fehlermeldung mit Parsley 2.x und Bootstrap 3

Ich versuche, eine Reihe von Radio-Schaltflächen in einer Bootstrap 3 Btn-Gruppe Parsley-Validierung hinzuzufügen.Fehlerhafte Platzierung der Fehlermeldung mit Parsley 2.x und Bootstrap 3

Das Problem ist, dass der Fehler Wrapper, die Petersilie injiziert (in meinem Fall auf einen Bereich) zwischen den beiden Optionen (die in einer Bezeichnung enthalten sind) statt außerhalb der Btn-Gruppe div erscheinen.

Dies wird in der Probe unten dargestellt:

<div class="form-group"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">Yes</label> 
     <span class="help-block" id="parsley-id-multiple-BuyAgain"></span> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">No</label> 
    </div> 
</div>

Irgendwelche Vorschläge, wie ich das beheben kann?

Quelle

2014-03-25 Jon

Nach dem Durchsuchen des Quellcodes bemerkte ich, dass bei der Initialisierung von Parsley eine "errorsContainer" -Option verfügbar war.

Nach Änderung der initalisation Funktion:

$(".validate-form").parsley({ 
    successClass: "has-success", 
    errorClass: "has-error", 
    classHandler: function (el) { 
     return el.$element.closest(".form-group"); 
    }, 
    errorsContainer: function (el) { 
     return el.$element.closest(".form-group"); 
    }, 
    errorsWrapper: "<span class='help-block'></span>", 
    errorTemplate: "<span></span>" 
});

ich jetzt die resultierende html:

<div class="form-group"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">Yes</label> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">No</label> 
    </div> 
    <span class="help-block" id="parsley-id-multiple-BuyAgain"></span> 
</div>

Quelle

2014-03-26 10:01:18 Jon

Laut (neuesten Dokumentationen) müssen Sie ein window.ParsleyConfig-Objekt definieren, bevor Sie das petiterary.js-Skript einfügen. Hier können Sie die Felder wie folgt überschreiben: http://parsleyjs.org/doc/annotated-source/defaults.html – tapmonkey

Wenn Sie sich sonst auf die Datenattribute verlassen, um die Validierungsoptionen zu konfigurieren (dh, Sie binden sich automatisch mit den Daten ein) -parsley-validate), können Sie die Konfiguration der Instanz überschreiben, ohne die gesamte Initialisierung auf JavaScript zu übertragen. (zB '$ ('[data-petersilie-validate]'). petersilie() .options.errorsContainer = function (el) {return el. $ element.closes (" .form-group ");};') – highvolt

Eine andere Antwort, die equivqlent ist Antwort auf @ Jon ist ein die Daten Petersilie hinzufügen -errors-container-Attribut für Ihr Formular.

Quelle

2014-12-05 15:17:57 Moebius

Wenn Sie das Data-Petersy-errors-container-Attribut verwenden, wird die letzte .form-Gruppe ausgewählt, anstatt den nächsten in der Hierarchie relativ zum Feld, das validiert wird, kontextabhängig auszuwählen. Wenn Sie also nicht möchten, dass Ihre Fehler am Ende des Formulars in einem Container aggregiert werden, müssen Sie eine JavaScript-Callback-Funktion verwenden, um das Verhalten von Fehlernachrichten in ihrem jeweiligen Feld zu verwalten (das Datenattribut unterstützt nur einen Selektor) anstatt eine Funktionsreferenz). – highvolt

Fehlerhafte Platzierung der Fehlermeldung mit Parsley 2.x und Bootstrap 3

Antwort

Verwandte Themen