Zmiana pozycji listy błędów pietruszki w parsleyjs

Question

Używam parsleyjs.org do sprawdzania poprawności moich formularzy.

Wtyczka tworzy ui.parsley-errors-list, gdy dane wejściowe mają błąd sprawdzania poprawności.

Problemem jest to, że .parsley-errors-list jest umieszczony tuż po elementu formularza w "wejściowego, textarea, radio etc .." łamie mi układ w następujący sposób:

<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> 

Zamiast tego .parsley-errors-list należy ustawić jako ostatnie dziecko/element w kontenerze <fieldset>.

Czy jest to możliwe?

Answer 1

Możesz ustawić pojemnik błędu za pomocą (przynajmniej) na dwa sposoby.

1. Zmień pojemnik z DOM atrybuty

   W przypadkach, gdy masz tylko jedno wejście (lub grupy wejść, jak to zrobić) i chcesz zmienić pojemnik błędów na tych wejściach , możesz użyć data-parsley-errors-container="#element" (see the docs). Oto przykład (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> 
   

   Uwaga atrybut data-parsley-errors-container="#checkbox-errors" pierwszego wyboru i element <div id="checkbox-errors"></div> na końcu zestaw pól.

   W tym przypadku nie trzeba dodawać data-parsley-errors-container do wszystkich pól wyboru, ponieważ "grupujesz" je za pomocą data-parsley-multiple="checkbox2".

2. Ustaw niestandardową konfigurację, aby być wykorzystywane przez Pietruszka

   W przypadkach, gdy masz kilka lub wszystkie wejścia i chcesz zmienić położenie domyślnego kontenera. Powiedzmy, że wszystkie twoje pola są umieszczone wewnątrz zestawu pól i chcesz wyświetlić błędy na końcu zestawu pól.

   Rozwiązanie to pozwala na zmianę domyślnego kontenera dla każdego W tym rozwiązaniu dodaliśmy element <div id="checkbox-errors"></div> przed końcem zestawu konkretną i zmienił opcję pietruszki errorsContainer pola (jsfiddle demo)

   <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> 
   

   . Jeśli nasz element znajduje się w zestawie pól, błędy zostaną wyświetlone wewnątrz #checkbox-errors.

   Na podstawie tego przykładu można również ustawić ten sam kontener dla wszystkich pól.W tym przypadku opcje byłoby coś takiego (jsfiddle demo):

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

Answer 2

Spróbuj tego:

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

Wykorzystanie klasy, ponieważ działa na wielu polach.