jquery - マウスオーバーなしのjQuery qTipプラグイン

Question

ユーザーがボタンをクリックしたときに、input type="text" に簡単な検証を適用しようとしています。qTip を開いて表示したい場合は、フィールドの長さが 2 文字未満かどうかをチェックします。

ユーザーがフィールドに入力しているときに表示したくありません。こういうときだけ

$('#myfield').length > 0 && $('#myfield').length > 3){
     // open tool tip
}

Answer 1

このプラグインにクリックイベントを登録するには、qTip2が必要です。

HTML

<input type="text" name="test" value="" />
<input type="submit" name="submit" value="Submit" />

JQuery

$(function () {

            function openQTip(clickedElement, contentValue)
            {
                $(clickedElement).qtip({
                   content: contentValue,
                   show: 'click',
                   hide: 'mouseout'
                });
            }

            $('input[type="submit"]').click(function(e){

                var valueLength = $('input[type="text"]').val().length;

                if(valueLength > 0 && valueLength < 2)
                {
                    openQTip(this, 'not enough characters'); 
                }
                else
                {
                        //submit form
                }


                e.preventDefault();
            });
        });