Как отображать сообщения из плагина jQuery Validate во всплывающих подсказках Tooltipster?
Я хотел бы использовать плагин Tooltipster для отображения ошибок формы, генерируемых плагином jQuery Validate.
Плагин jQuery for Validate:
$(document).ready(function () {
$('#myform').validate({ // initialize jQuery Validate
// other options,
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
}
});
});
Плагин jQuery для Tooltipster:
$(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>
Как бы я интегрировал использование этих двух плагинов jQuery, чтобы в подсказках появлялись ошибки валидации?
2 ответа
Решения для Tooltipster версий 2.1, 3.0 и 4.0 включены в этот ответ.
Обратите внимание, что .tooltipster() привязан только к type="text"input элемент в моих примерах ниже. Если твой form содержит другие виды элементов ввода данных, такие как type="radio", type="date", textarea, select и т. д., то вы должны соответствующим образом настроить селектор или создать дополнительные экземпляры .tooltipster() для этих других элементов. В противном случае все будет с ошибками.
Tooltipster v2.1
Сначала инициализируйте плагин Tooltipster ( с любыми опциями) для всех определенных 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 вместе с success: а также errorPlacement: Функции обратного вызова, встроенные в плагин Validate для автоматического отображения и скрытия подсказок следующим образом:
$(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/
РЕДАКТИРОВАТЬ: Обновлен код, чтобы использовать преимущества новых функций API Tooltipster, выпущенных в версии 2.1 от 2/12/13
ОБНОВЛЕНИЕ для Tooltipster v3.0
Tooltipster 3.0 отсутствует и поэтому не работает так, как показано выше. Следующий код предоставляет обновленный пример. Эта версия имеет дополнительное преимущество: она не вызывает Tooltipster при каждом нажатии клавиши, когда сообщение еще не изменилось.
(Не забывайте, что вам все еще нужно прикрепить .tooltipster() к вашему релевантному input элементы, как показано выше.)
$(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: http://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/
Ответ Спарки был одним из основных элементов проверки моего сайта, но обновление до Tooltipster 4 потребовало некоторых изменений. Вот как я получил свою работу, и с некоторыми улучшениями.
На ваших страницах включите подсказку 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">
Кроме того, вам нужно включить javascript-файл подсказки. Вам также понадобится javascript для проверки jquery.
<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 или в некоторых тегах скрипта, вам нужно поместить свой код проверки, а также код всплывающей подсказки. Вот один из моей веб-страницы, изменения от ответа Спарки находятся вверху.
$(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
......
}
});
});
Теперь, когда вы вводите что-то в поле, которое нарушает одно из перечисленных правил, над окном появляется всплывающее окно с сообщением о том, что jquery-validate говорит, что это неправильно. Оно также не откроет сообщение, если в нем нет ничего, чтобы показать пользователю (что привело бы к открытию пустой всплывающей подсказки и немедленному закрытию, что выглядит странно).