Проверка Bassistance не работает правильно с jqTransform - PullRequest
Новая
       11

Проверка Bassistance не работает правильно с jqTransform

0 голосов
/ 02 сентября 2010

Я использую jqTransform для стиля моих форм, который работает очень хорошо. Однако, когда я добавляю плагин Bassistance's Validation, сообщения об ошибках валидации отображаются внутри элементов div jqTransformwrapper (т.е. внутри текстового поля) вместо родительского элемента (после ввода).

Итак, DOM показывает это: 

<label for="firstname">Firstname</label>
<div class="jqTransformInputWrapper">
   <div class="jqTransformInputInner">
      <div><input class="required jqtranformdone jqTransformInput error" name="firstname" id="firstname">
      <label for="firstname" generated="true" class="error">This field is required.</label>
      </div>
   </div>

Принимая во внимание, что это должно быть: 

<label for="firstname">Firstname</label>
<div class="jqTransformInputWrapper">
   <div class="jqTransformInputInner">
      <div>
         <input class="required jqtranformdone jqTransformInput error" name="firstname" id="firstname">
      </div>
   </div>
</div>
<label for="firstname" generated="true" class="error">This field is required.</label>
</div>

Можно ли как-нибудь заставить плагин вставить метку ошибки 3 родительского элемента выше?

Я заметил на странице примера Bassistance, что они используют другой плагин для стилизации форм, и у меня нет этой проблемы, но я не могу понять, как они это сделали. http://jquery.bassistance.de/validate/demo/themerollered.html

Ответы [ 2 ]

1 голос
/ 11 февраля 2012

Ищите это при вызове функции validate: 

errorPlacement: function(error, element) {
                    if ( element.is(":text") )
                        error.appendTo( element.parent().parent().parent().parent() );
                    else
                        error.appendTo( element.parent().next() );
                }

обратите внимание на последовательность .parent ().Вы можете ориентироваться на различные области, как это.это называется селектором jquery.другие параметры, в том числе: .children () .next () .prev ()

Обратите внимание, что я указал ввод текста в качестве источника.С помощью этого множества селекторов parent () вы можете избежать оберток div jqtransform и достичь внешнего мира.

поиграйтесь с комбинациями, чтобы разместить метку именно там, где вы хотите!

0 голосов
/ 02 сентября 2010

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

#myForm label.error {
   color:#dd0000;
   position:absolute;
   float:none;
   font-style:italic;
   left:350px;
   top:4px;
}

Таким образом, ошибка появляется рядом с каждым входом, а не внутри него:)

...