1

私に提案されたように、検証プラグインのエラーメッセージにツールチップスターを使用しました。この解決策はうまく機能しますが、ダイアログ ウィンドウを開くときに問題が発生します。エラー メッセージ (ツールチップスター) が表示され、ダイアログ (fancybox v2) を開くと、ダイアログ ウィンドウ上でツールチップスターがアクティブなままになります。この問題を解決するために、fancybox beforeShow イベントでツールチップスターを閉じようとしましたが、この方法でダイアログ ボックスを閉じて再検証しようとすると、ツールチップが開かなくなりました。

// initialize tooltipster on text input elements
$('#form-test select').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'bottom'
});

// initialize validate plugin on the form
$("#form-test").validate({
    rules: {
        user: "required",
    },
    messages: {
        user: "error",
    },
    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');
    },
    submitHandler: function (form) { // for demo
        alert('valid form');
        return false;
    }
});


// fancybox v 2.1.5
$(".various").fancybox({
    maxWidth    : 300,
    maxHeight   : 300,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    type        : 'inline',
    href        : '#modal-msg',
    beforeShow : function()
    {
        // Remove validation tooltipster in the 
        // parent page if present
        //$('[id^="form-"] :input').tooltipster('hide');
    }
});

HTML

<div id="container">
<form id="form-test" action="#">
<select name="user" id="test">
    <option value=""></option>
    <option value="1">1</option>
    <option value="1">2</option>
    <option value="1">3</option>
</select>
<input type="submit" id="validate-btn" value="validate" />
</form>
<br />
<br />
<br />
<input type="button" class="various" value="Open dialog" />
<div id="modal-msg"></div>
</div>

どうすれば修正できますか?ありがとう

ここにデモがあります:

http://jsfiddle.net/2012j6dv/10/

4

2 に答える 2