Web アプリケーション用の「カスタム」検証モジュールを構築しています。すべてのチェックボックス要素に変更リスナーをアタッチしています。change イベントが発生すると、入力が必要かどうかを確認します。要素がチェックされていない場合、要素は検証に失敗します。特定のチェックボックスを手動でクリックすると、これは完全に機能します。ツールチップは計画どおりに表示/破棄されます。
送信ボタンをクリックしたときに同じ機能を取得しようとしています。システムは、ツールチップがレンダリングされる (はずである) ことを認識していますが、そうではありません。クリックイベントをトリガーする必要があるようですが、チェックボックス要素でそれを行うと、要素が選択されます。ユーザーが望む機能ではありません。実際に何もクリックせずに、クリックを渡す方法がわかりません。
特定の要素が無効な場合にツールリップを呼び出す方法は次のとおりです。
Validation.js
Tooltip.initialize($element, {'trigger': 'click', 'placement': 'bottom', 'title': Messages[$element.attr('name') + 'Required']});
特定のツールチップを初期化して表示するコードは次のとおりです。
Tooltip.js
initialize: function($element, options) {
(Tooltip.debug) ? console.log('-- initialize --') : null;
(Tooltip.debug) ? console.log('tooltip for: ' + $element.attr('name')) : null;
var that = this;
$('#' + $element.attr('name')).tooltip({
'placement': options.placement,
'title': options.title,
'trigger': options.trigger
}).on({
'blur': function() {
switch ($element.attr('type'))
{
case 'checkbox':
break;
case 'email':
that.show($element);
break;
case 'password':
that.show($element);
break;
case'tel':
that.show($element);
break;
case 'text':
that.show($element);
break;
default:
break;
}
},
'focus': function() {
that.destroy($element);
}
});
....
show: function($element) {
$('#' + $element.attr('id')).tooltip('show');
},
destroy: function($element) {
$('#' + $element.attr('id')).tooltip('destroy');
}
....