Ошибка Tooltipster и Jquery Validator при использовании с формами внутри анимированных ящиков div свертывания
Любая помощь будет принята с благодарностью.
У меня есть страница, полная "ящиков", которые работают как аккордеон. Не удалось использовать аккордеон JQery UI по разным причинам. Так что вместо этого я использую Animated Collapse 2.4 с динамического диска. Каждый из ящиков div содержит уникальные формы. В этих формах я использую Jquery Validator и tooltipster для отображения ошибок валидации.
У меня проблема в том, что когда рисование закрывается до успешной проверки, всплывающие подсказки не исчезают полностью, они зависают там, где была форма, и если вы прокручиваете страницу или вообще перемещаетесь, они переходят в верхнюю левую часть окна. половина экрана показана! Так что они вроде как прячутся, но не полностью. Как будто им нужно расположить еще несколько десятков пикселей вверх и влево.
Поскольку у меня есть несколько ящиков div, содержащих формы, иногда необходимо заполнить другой ящик при заполнении формы одного конкретного чертежа, чтобы ссылаться на другие данные. Поэтому иногда мне нужно, чтобы пользователи могли закрыть ящик без полного заполнения каждой формы и вернуться к нему позже.
Есть идеи, пожалуйста?
Вам нужно включить js-скрипты из Dynamic Drive для файла animatedcollapse.js, доступного по ссылке
Также вам необходимо включить файлы 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
}
});
1 ответ
Благодаря огромной помощи Луи из Tooltipster у меня есть решение. Решением является обновление до новой версии tooltipster (в настоящее время работающей в ветке разработчика git jquery.tooltipster.js версии 3.3.0), которая предоставляет новую функцию: positionTracker.
Обновлена js fiddle: ссылка
Включите positionTracker и обработайте errorPlacement от валидатора jquery:
$(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');
},