Tooltipsterツールチップ内にjQuery Validateプラグインからのメッセージを表示する方法は？
Tooltipsterプラグイン を使用して、 jQuery Validateプラグイン によって生成されたフォームエラーを表示したいと思います。
jvalidateプラグインのクエリ：
$(document).ready(function () {
$('#myform').validate({ // initialize jQuery Validate
// other options,
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
}
});
});
jTooltipsterプラグインのクエリ：
$(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プラグインの使用をどのように統合しますか？
Tooltipsterバージョン2.1、3.0、および4.0のソリューションがこの回答に含まれています。
[〜＃〜] note [〜＃〜].tooltipster()は、次の_type="text"_ input要素にのみ付加される以下の私の例。 formに_type="radio"_、_type="date"_、textarea、selectなどの他の種類のデータ入力要素が含まれている場合、mustそれに応じてセレクタを調整するか、これらの他の要素に対して.tooltipster()の追加インスタンスを作成します。そうしないと、すべてがエラーで失敗します。
Tooltipster v2.1
最初に、Tooltipsterプラグインを初期化します（ with options ）onall特定の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
});
});
_次に、 Tooltipsterの詳細オプション を、Validateプラグインに組み込まれた _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
[〜＃〜] edit [〜＃〜]：2/12 /バージョン2.1でリリースされた新しいTooltipster API機能を利用するためにコードを更新13
Tooltipster v3.0のアップデート
Tooltipster 3.0がリリースされたため、上記の図と同じように機能しません。次のコードは更新された例を提供します。このバージョンには、メッセージがまだ変更されていないときにすべてのキーストロークでTooltipsterを呼び出さないという利点があります。
（上記のように、関連するinput要素に.tooltipster()を添付する必要があることを忘れないでください。）
_$(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/
Sparkyの答えは私のサイトの検証の定番でしたが、Tooltipster 4にアップグレードするにはいくつかの変更が必要でした。いくつかの改善を加えて、私がどのように機能するかを説明します。
ページのheadセクションにtooltipster cssとテーマcss（およびページで説明されているようにテーマをサブクラス化するテーマcss）を含めます。
<link rel="stylesheet" type="text/css" href="/styles/tooltipster.bundle.css">
<link rel="stylesheet" type="text/css" href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">
さらに、tooltipsterのjavascriptファイルを含める必要があります。 jquery-validation javascriptも必要です。
<script src="/js/tooltipster.bundle.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
ここで、別のjavascriptファイルまたはいくつかのscriptタグのいずれかに、検証コードとツールヒントコードを配置する必要があります。ここに私が持っているウェブページからのものがあります、Sparkyの答えからの変更は一番上にあります。
$(document).ready(function(){
$('#form input[type="text"]').tooltipster({ //find more options on the tooltipster page
trigger: 'custom', // default is 'hover' which is no good here
onlyOne: false, // allow multiple tips to be open at a time
position: 'top',
animation: 'grow',
theme: ['tooltipster-light'] //put your themes here
});
//form validation initialization
$("#form").validate({
errorPlacement: function (error, element) {
if (error[0].innerHTML != null && error[0].innerHTML !== "") {
$(element).tooltipster('content', $(error).text());
$(element).tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
}
},
success: function (label, element) {
var obj = $(element);
if (obj.hasClass('tooltipstered') && obj.hasClass('error')) {
$(element).tooltipster('close'); //hide no longer works in v4, must use close
}
},
rules: {
// your rules
......
}
});
});
リストされたルールの1つに違反するフィールドに何かを入力すると、ボックスの上にjquery-validateが間違っているというポップアップが表示されます。また、ユーザーに表示するものが何もない場合もメッセージを開きません（空のツールチップを開いてすぐに閉じると、奇妙に見えます）。