20

Tooltipster プラグインを使用して、 jQuery Validate プラグインによって生成されたフォーム エラーを表示したいと考えています。

jQuery for Validate プラグイン:

$(document).ready(function () {

    $('#myform').validate({ // initialize jQuery Validate
        // other options,
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

Tooltipster プラグインの jQuery :

$(document).ready(function () {

    $('.tooltip').tooltipster({ /* options */ });  // initialize tooltipster

});

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

ツールチップ内に検証エラーが表示されるように、これら 2 つの jQuery プラグインの使用を統合するにはどうすればよいですか?

4

2 に答える 2

42

この回答には、Tooltipster バージョン 2.1、3.0、および 4.0 のソリューションが含まれています。

以下の例の要素に.tooltipster()のみ添付されていることに注意してください。、、、などの他の種類のデータ入力要素が含まれているtype="text" input場合は、それに応じてセレクターを調整するか、これらの他の要素に対して の追加のインスタンスを作成する必要があります。そうしないと、すべてがエラーで失敗します。formtype="radio"type="date"textareaselect.tooltipster()

ツールチップス v2.1

最初に、エラーを表示するすべての特定の要素でTooltipster プラグインを (任意のオプションで)初期化します。form

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

});

次に、Validate プラグインに組み込まれているおよびコールバック関数とともにTooltipster の高度なオプションを使用して、次のようにツールヒントを自動的に表示および非表示にします。success:errorPlacement:

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

実際のデモ: http://jsfiddle.net/2DUX2

編集: 2013 年 2 月 12 日にバージョン 2.1 でリリースされた新しい Tooltipster API 機能を利用するようにコードを更新しました。

Tooltipster v3.0 の更新

Tooltipster 3.0 がリリースされたため、上記のようには機能しません。次のコードは、更新された例を提供します。このバージョンには、メッセージがまだ変更されていない場合、すべてのキーストロークで Tooltipster を呼び出さないという追加の利点があります。

(上記のように、関連する要素にアタッチする必要があることを忘れないでください.tooltipster()input。 )

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            var lastError = $(element).data('lastError'),
                newError = $(error).text();

            $(element).data('lastError', newError);

            if(newError !== '' && newError !== lastError){
                $(element).tooltipster('content', newError);
                $(element).tooltipster('show');
            }
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

Tooltipster v3.0 を使用したデモ: jsfiddle.net/2DUX2/3/

Tooltipster v4.0 の更新

このonlyOneオプションは、Tooltipster プラグインの 4.0 バージョンから削除されていることに注意してください。

successまた、コールバックをに置き換えましたunhighlight。「オプション」フィールドでは、フィールドが後で空白になったときにエラーメッセージが削除されませんでした...これは、successこれらの状況では関数が起動しないためです。この問題は Tooltipster バージョン 4 だけに限定されたものではありませんが、次のコードで解決できます。

// initialize Tooltipster on text input elements
$('input[type="text"]').tooltipster({ //find more options on the tooltipster page
    trigger: 'custom', // default is 'hover' which is no good here
    position: 'top',
    animation: 'grow'
});

// initialize jQuery Validate
$("#myform").validate({
    errorPlacement: function (error, element) {
        var ele = $(element),
            err = $(error),
            msg = err.text();
        if (msg != null && msg !== '') {
            ele.tooltipster('content', msg);
            ele.tooltipster('open');
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
    },
    rules: {
        ....

Tooltipster v4.0 を使用したデモ: https://jsfiddle.net/h5grrrr9/

于 2013-02-07T00:46:22.213 に答える