任何帮助都将非常感谢。
我的页面里装满了＆＃34;抽屉＆＃34;像手风琴一样操作。由于各种原因，无法使用Jquery UI手风琴。因此，我使用动态驱动器动画折叠2.4。每个抽屉div包含独特的形式。在这些表单上，我使用Jquery Validator和tooltipster来显示验证错误。
我遇到的问题是，在验证成功之前关闭平局时，工具提示器不会完全消失，它们会悬浮在表单所在的位置，如果您滚动页面或四处移动，它们会跳转到屏幕的左上方显示了一半！所以他们有点隐藏但不完全。好像他们需要向上和向左定位几十个像素。
因为我有多个包含表格的div抽屉，所以在完成一个特定抽奖表格以引用其他数据时，有时需要切换到另一个抽屉。因此，有时我需要用户能够在不完全填写每个表单的情况下关闭抽屉并稍后再回来。
有什么想法吗？
您需要在动态云端硬盘中包含动画广告系列的js脚本 - 可在Link
获取您还需要包含可在Link下载的jquery.tooltipster.js和css文件
HTML：
<head>
<script src="js/animatedcollapse.js" type="text/javascript" ></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>
</head>
<body>
<p><b>Example 1 (individual):</b>
</p>
<a href="javascript:animatedcollapse.toggle('cust')"></a> <a href="javascript:animatedcollapse.show('cust')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cust')">Slide Up</a>
<div id="cust" style="width: 800px; background: #FFFFCC; display:none">
<form id="custForm" name="custForm" method="post">
<h4>Enter your customer details</h4>
<p>Title:
<BR />
<select name="titleBox" id="titleBox">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mis">Ms</option>
<option value="Dr">Dr</option>
<option value="Dr">Sir</option>
</select>
</p>Firstname:
<BR>
<input name="firstnameBox" type="text" id="firstnameBox" size="40" onkeyup="" onblur="" minlength="1" required />
<BR />Surname:
<BR>
<input name="surnameBox" type="text" id="surnameBox" size="40" onkeyup="" minlength="2" required />
<BR />Home tel:
<BR />
<input name="hometelBox" type="text" class="phoneUK" id="hometelBox" size="40" onkeyup="" required />
<BR />Mobile:
<BR />
<input name="mobileBox" type="text" id="mobileBox" size="40" minlength="7" onkeyup="" required/>
<BR />Work tel:
<BR />
<input name="worktelBox" type="text" id="worktelBox" size="40" minlength="7" onkeyup="" required/>
<BR />Email:
<BR />
<input name="emailBox" type="text" class="EMAIL" id="emailBox" size="40" />
<BR />
<BR />
<BR />
<strong><em>Address Manual Entry</em></strong>
<BR/>
<BR />House Name/Flat number:
<BR />
<input name="man_housenmBox" onkeyup="" type="text" id="man_housenmBox" size="40" />
<BR />House Number:
<BR />
<input name="man_housenoBox" onkeyup="" type="text" id="man_housenoBox" size="40" />
<BR />Street Name 1:
<BR />
<input name="man_street1Box" onkeyup="" type="text" id="man_street1Box" size="40" minlength="4" required/>
<BR />Street Name 2:
<BR />
<input name="man_street2Box" onkeyup="" size="40" />
<BR />Town/City:
<BR />
<input name="man_townBox" type="text" id="man_townBox" size="40" minlength="4" />
<BR />County:
<BR />
<input name="man_countyBox" onkeyup="" type="text" id="man_countyBox" size="40" minlength="4" />
<BR />Postal Code:
<BR />
<input name="man_postcodeBox" class="postcodeUK" type="text" id="man_postcodeBox" minlength="4" />
<BR />
<BR />
<P align="center">
<button id="sub" value="Trigger validation" type="submit"><span class="ui-button-text">Trigger Valdation</span>
</button>
</P>
</form>
</div>
</body>
和JS：
animatedcollapse.addDiv('cust');
animatedcollapse.ontoggle = function ($, divobj, state) {};
animatedcollapse.init();
$(document).ready(function () {
// initialize tooltipster on text input elements
$('#custForm input[type="text"]').tooltipster({
theme: 'tooltipster-shadow',
positionTracker: 'true',
trigger: 'custom',
onlyOne: false,
position: 'right',
animation: 'fall',
positionTrackerCallback: function(){
this.hide();}
});
});
jQuery.validator.messages.required = "";
$.validator.addMethod("EMAIL", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,6}$/i.test(value);
}, "Email Address is invalid: Please enter a valid email address.");
jQuery.validator.addMethod('phoneUK', function (phone_number, element) {
return this.optional(element) || phone_number.length > 9 &&
//phone_number.match(/^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9\s]{3,4}){3}$/);
phone_number.match(/^\(?(?:(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?\(?(?:0\)?[\s-]?\(?)?|0)(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}|\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4}|\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3})|\d{5}\)?[\s-]?\d{4,5}|8(?:00[\s-]?11[\s-]?11|45[\s-]?46[\s-]?4\d))(?:(?:[\s-]?(?:x|ext\.?\s?|\#)\d+)?)$/);
}, 'Please specify a valid UK phone number');
jQuery.validator.addMethod("postcodeUK", function (value, element) {
return this.optional(element) || /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i.test(value);
}, "Please specify a valid UK Postcode - with a space between the first and second parts - e.g. RG1 2BT");
var validator = $("#custForm").validate({
messages: {
firstnameBox: "Please enter a first name or initial (min 1 character).",
surnameBox: "Please enter a last name (min 2 characters).",
hometelBox: "Please enter the end user's home UK landline number (must be a valid UK number).",
worktelBox: "Please enter a work telephone number.",
mobileBox: "Please enter a mobile phone number.",
emailBox: "Please enter a valid email address.",
man_street1Box: "Please enter a street name",
man_townBox: "Please enter a Town.",
man_countyBox: "Please enter a County.",
man_postcodeBox: "Please enter a valid UK postal code, with a space between the first and second parts - e.g. RG1 2BT."
},
rules: {
hometelBox: {
required: true
},
emailBox: {
required: false,
email: true
}
},
errorPlacement: function (error, element) {
var lastError = $(element).data('lastError'),
newError = $(error).text();
$(element).data('lastError', newError);
$(element).tooltipster('show');
if (newError !== '' && newError !== lastError) {
$(element).tooltipster('content', newError);
$(element).tooltipster('show');
}
},
success: function (label, element) {
$(element).tooltipster('hide');
},
submitHandler: function (form) {
// do other things for a valid form
}
});
答案 0 :(得分：0)
非常感谢路易斯在Tooltipster的超级帮助，我有一个解决方案。解决方案是升级到新版本的tooltipster（目前在git jquery.tooltipster.js版本3.3.0的dev分支中工作），它提供了一个新功能：positionTracker。
更新了js fiddle：Link
启用positionTracker并从jquery验证器处理errorPlacement：
$(document).ready(function () {
// initialize tooltipster on text input elements
$('#yourForm input[type="text"]').tooltipster({
theme: 'tooltipster-shadow',
positionTracker: 'true',
trigger: 'custom',
onlyOne: false,
position: 'right',
animation: 'fall',
positionTrackerCallback: function(){
this.hide();
}
});
});
并在jquery验证器函数中：
errorPlacement: function (error, element) {
var lastError = $(element).data('lastError'),
newError = $(error).text();
$(element).data('lastError', newError);
$(element).tooltipster('show');
if (newError !== '' && newError !== lastError) {
$(element).tooltipster('content', newError);
$(element).tooltipster('show');
}
},
success: function (label, element) {
$(element).tooltipster('hide');
},