jQuery.validationEngine: ポップアップの位置を変更する方法

Table of Contents

jQuery.validationEngine で、ポップアップの位置を変更する方法をまとめました。

環境

jQuery.validationEngine v2.6.2

経緯

jQuery.validationEngine を jQuery UI の Dialog 内のフォームで使用したら、アラートのポップアップが入力欄の上の方に表示されて見えなくなったため、ポップアップの位置を調整する必要が出てきた。

属性 data-prompt-position を使用します。

基本

data-prompt-position に topLeft, bottomLeft, bottomRight を指定します。デフォルトでは topRight になっています。

<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" />
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" />

位置調整

data-prompt-position に基本となるポジションとオフセットを記述します。

ポジションを指定すると下のようになります。これだけでも表示される位置が変わります。 data-prompt-position 属性に topLeft, topRight, bottomLeft, bottomRight の値を設定します。

<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" />
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" />

オフセットを設定すると、topLeft に配置したいけれども一番左じゃなくて左から2文字ぐらい右に移動したところ、といったような微調整を行うことができます。 data-prompt-position の値をtopLeft:20,5 のように変更します。最初の数値は X のオフセット、次の数値が Y のオフセットです。

<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft:70" />
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft:20,5" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight:-100,3" />