Измените положение списка ошибок петрушки в parsleyjs

Question

Я использую parsleyjs.org для проверки моих форм.

Плагин создает ui.parsley-errors-list, когда вход имеет ошибку проверки.

Проблема заключается в том, что .parsley-errors-list уделяется только после того как форма элемента «ввода, TEXTAREA, радио и т.д ..» сломав макет следующим образом:

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

Вместо этого .parsley-errors-list должен быть помещен как последний дочерний элемент в контейнер <fieldset>.

Возможно ли это?

Answer 1

Вы можете установить контейнер с ошибкой (по крайней мере) двумя способами.

1. Изменить контейнер с DOM атрибуты

   В тех случаях, когда у вас есть только один вход (или группу входов, как вы делаете), и вы хотите изменить контейнер ошибок на этих входах , вы можете использовать data-parsley-errors-container="#element" (see the docs). Ниже приведен пример (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> 
   

   Примечание атрибут data-parsley-errors-container="#checkbox-errors" на первом флажок и элемент <div id="checkbox-errors"></div> в конце полей.

   В этом случае вам не нужно добавлять data-parsley-errors-container ко всем флажкам, потому что вы «группируете» их с помощью data-parsley-multiple="checkbox2".

2. Установка пользовательской конфигурации для использования Петрушка

   В тех случаях, когда у вас есть несколько или все входы и вы хотите, чтобы изменить положение контейнера по умолчанию. Допустим, что все поля помещены внутри набора полей, и вы хотите отображать ошибки в конце набора полей.

   Это решение позволяет изменять контейнер по умолчанию для каждого поля (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> 
   

   В этом решении мы добавили элемент <div id="checkbox-errors"></div> до конца FIELDSET и изменил errorsContainer вариант петрушка. Если наш элемент находится внутри поля, ошибки будут отображаться внутри #checkbox-errors.

   На основании этого примера вы также можете установить один и тот же контейнер для всех полей.В этом случае ваши варианты будут что-то вроде этого (jsfiddle demo):

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

Answer 2

Попробуйте это:

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

Используйте класс, потому что он работает на многих областях.