Zeige Parsley.js Fehler vor dem Elternteil div

Ich habe mit diesem für ein paar Stunden gerungen, aber kann es nicht zur Arbeit bringen.Zeige Parsley.js Fehler vor dem Elternteil div

Ich benutze Bootstrap und versuche, Parsley.js damit arbeiten zu lassen, wie ich möchte.

Standardmäßig werden Fehlermeldungen unterhalb des Eingabeelements angezeigt, das fehlerhaft ist, aber ich möchte, dass sie über dem übergeordneten Element angezeigt werden.

Mein HTML hier ist ...

<div class="row"> 
     <div class="col-xs-6"><label>Reference number</label></div> 
     <div class="col-xs-6"> 
<div class="input-group"> 
    <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span> 
      <input class="form-control" id="user_reference" name="user_reference" placeholder="Reference" data-parsley-group="stage_1" required /> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6"><label>Your surname</label></div> 
     <div class="col-xs-6"> 
<div class="input-group"> 
    <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> 
      <input class="form-control" id="user_surname" name="user_surname" placeholder="Surname" data-parsley-group="stage_1" required /> 
     </div> 
     </div> 
    </div>

ich die Fehlermeldungen über dem <div class="input-group"> erscheinen soll. Ist das möglich?

Ich habe mit diesem Javascript experimentiert, aber der Fehler erschien noch nach dem Eingangselement ...

$(document).ready(function() { 
    $('#register_form').parsley({ 
     trigger: 'change', 
     successClass: 'has-success', 
     errorClass: 'has-error', 
     classHandler: function (el) { 
      return el.$element.closest('.input-group'); 
     }, 
     errorsWrapper: '<div class="invalid-message"></div>', 
     errorTemplate: '<span></span>' 
    }); 
});

Wenn Sie mich in die richtige Richtung zeigen kann, würde ich wirklich dankbar!

Quelle

2017-05-01 Damian