0

私はjqTransformを使用して、フォームのスタイルを設定しています。これは非常にうまく機能します。ただし、BassistanceのValidationプラグインを追加すると、検証エラーメッセージは、親要素（入力後）ではなく、jqTransformwrapper div内（つまり、テキストボックス内）に表示​​されます。

したがって、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

4

2 に答える 2

1

検証関数の呼び出しでこれを探します。

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をエスケープして、外の世界に到達することができます。

組み合わせで遊んで、ラベルを希望の場所に正確に配置してください。

于 2012-02-10T23:08:24.237 に答える
0

回避策として、行 div を相対位置に設定し、エラー メッセージを絶対位置に設定して、div に相対的になるようにします。

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

このようにして、エラーは各入力の内側ではなく横に表示されます:)

于 2010-09-02T10:06:22.040 に答える