Ändern Sie die Position der Petersilie-Fehler-Liste in petersiliejs

Question

Ich verwende parsleyjs.org, um meine Formulare zu validieren.

Das Plugin erstellt eine ui.parsley-errors-list, wenn eine Eingabe einen Validierungsfehler hat.

Das Problem ist, dass die .parsley-errors-list Element unmittelbar nach dem Formular platziert wird "Eingang, Textarea, Radio etc .." mein Layout zu brechen wie folgt:

<fieldset> 
    <p>Checkboxs with a max</p> 
    <label class="checkbox parsley-error"> 
     <input name="checkbox2" type="checkbox" required="" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span> 
     <p>Normal</p> 
    </label> 
    <ul class="parsley-errors-list filled" id="parsley-id-multiple-checkbox2"> 
     <li class="parsley-required">This value is required.</li> 
    </ul> 
    <label class="checkbox"> 
     <input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span> 
     <p>Normal</p> 
    </label> 
    <label class="checkbox"> 
     <input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span> 
     <p>Normal</p> 
    </label> 
</fieldset> 

Stattdessen wurde die .parsley-errors-list müssen positioniert werden, um das letzte Kind/Element im Container zu sein <fieldset>.

Ist das möglich?

Answer 1

Sie können den Fehler Behälter mit (mindestens) zwei Arten eingestellt.

1. Ändern Sie den Behälter mit DOM-Attribute

   In Fällen, in denen Sie nur einen Eingang haben (oder eine Gruppe von Eingaben, wie Sie tun), und Sie wollen den Behälter der Fehler auf diesen Eingaben ändern Sie können data-parsley-errors-container="#element" (see the docs) verwenden. Hier ist ein Beispiel (jsfiddle demo)

   <fieldset> 
       <label class="checkbox-inline"> 
        <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1 
       </label> 
       <label class="checkbox-inline"> 
        <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 
       </label> 
       <label class="checkbox-inline"> 
        <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 
       </label> 
   
       <div id="checkbox-errors"></div> 
   </fieldset> 
   

   Hinweis des Attribut data-parsley-errors-container="#checkbox-errors" auf dem ersten Markierungsfeld und das Element <div id="checkbox-errors"></div> am Ende des Fieldset.

   In diesem Fall müssen Sie die Kontrollkästchen data-parsley-errors-container nicht allen Kontrollkästchen hinzufügen, da Sie sie mit data-parsley-multiple="checkbox2" gruppieren.

2. eine benutzerdefinierte Konfiguration Set von Petersilie

   In den Fällen verwendet werden, wo Sie einige oder alle Eingänge haben und Sie möchten die Position des Standardcontainer ändern. Nehmen wir an, alle Felder sind in einem Feldsatz platziert und Sie möchten die Fehler am Ende des Feldsets anzeigen.

   Diese Lösung ermöglicht es Ihnen, die Standard-Container für jedes Feld (jsfiddle demo) Bei dieser Lösung

   <fieldset> 
       <label class="checkbox-inline"> 
        <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1 
       </label> 
       <label class="checkbox-inline"> 
        <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 
       </label> 
       <label class="checkbox-inline"> 
        <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 
       </label> 
   
       <div id="checkbox-errors"></div> 
   </fieldset> 
   
   <script> 
   $(document).ready(function() { 
       var parsleyConfig = { 
        errorsContainer: function(parsleyField) { 
         var fieldSet = parsleyField.$element.closest('fieldset'); 
   
         if (fieldSet.length > 0) { 
          return fieldSet.find('#checkbox-errors'); 
         } 
   
         return parsleyField; 
        } 
       }; 
   
   
       $("form").parsley(parsleyConfig); 
   }); 
   </script> 
   

   ändern wir das Element <div id="checkbox-errors"></div> vor dem Ende des fieldset und änderten die errorsContainer Option Petersilie hinzugefügt haben. Wenn sich unser Element in einem Fieldset befindet, werden die Fehler innerhalb der #checkbox-errors angezeigt.

   auf diesem Beispiel Basierend, sind Sie auch in der Lage die gleichen Container für alle Felder zu setzen.In diesem Fall würden Ihre Möglichkeiten so etwas wie diese (jsfiddle demo) sein:

   var parsleyConfig = { 
       errorsContainer: function(parsleyField) { 
        return $('#errors'); 
       } 
   }; 
   

Answer 2

Try this:

$.listen('parsley:field:error', function(fieldInstance){ 
      var fieldName = fieldInstance.$element.attr('name'); 
      var field = $('input[name="'+fieldName+'"]'); 
      var fieldWrapper = field.parents('fieldset'); 
      if (fieldWrapper.find('.errors_container').length > 0) { 
       setTimeout(function(){ 
        fieldWrapper.find('.errors_container').append(fieldWrapper.find('.parsley-errors-list')); 
       },100); 
      } 
     }); 
     $('form').parsley(); 
} 

Gebrauchsklasse, weil es für viele Bereiche arbeitet.