私に提案されたように、検証プラグインのエラーメッセージにツールチップスターを使用しました。この解決策はうまく機能しますが、ダイアログ ウィンドウを開くときに問題が発生します。エラー メッセージ (ツールチップスター) が表示され、ダイアログ (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>
どうすれば修正できますか?ありがとう
ここにデモがあります: