[英]Tooltipster for both showing tooltips for fields and showing errors in Jquery validation
I'm using the tooltipster plugin to show fields's hints and also another tooltip at bottom to show errors from jquery validate plugin, but for some reason all the messages updates are happening on the first error tooltip.我正在使用 tooltipster 插件来显示字段的提示,并在底部使用另一个工具提示来显示 jquery 验证插件中的错误,但由于某种原因,所有消息更新都发生在第一个错误工具提示上。
What am I missing?我错过了什么?
$(document).ready(function () { // initialize tooltipster on text input elements $('input').tooltipster(); var tooltipsterErrorMsg = []; // initialize validate plugin on the form $('#myform').validate({ showErrors: function(errorMap, errorList) { // Clean up any tooltips for valid elements $.each(this.validElements(), function (index, element) { if (index < tooltipsterErrorMsg.length) { tooltipsterErrorMsg[index].hide(); } }); // Create new tooltips for invalid elements $.each(errorList, function (index, error) { if (index === tooltipsterErrorMsg.length) { var tooltipObject = $(error.element).tooltipster({ trigger: 'custom', multiple: true, position: 'bottom' }); tooltipsterErrorMsg.push(tooltipObject[0]); } tooltipsterErrorMsg[index].content(errorList[index].message).show(); }); }, rules: { field1: { required: true, email: true }, field2: { required: true, minlength: 5 } }, submitHandler: function (form) { // for demo alert('valid form'); return false; } }); });
#myform { margin: 100px; } input { margin: 20px; } a { display: block; position: absolute; bottom: 0; } .error { color: #900; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <form id="myform"> <input type="text" name="field1" title="Tooltip teste 1" /> <input type="text" name="field2" title="Tooltip teste 2" /> <br/> <input type="submit" /> </form>
Here's the fiddle: http://jsfiddle.net/macmessa/m368ntxw/这是小提琴: http : //jsfiddle.net/macmessa/m368ntxw/
Two issues...两个问题...
You're using the showErrors
function improperly.您
showErrors
正确使用showErrors
函数。 It was only intended for constructing an error list, not for individual error placement.它仅用于构建错误列表,而不是用于单个错误放置。 Employ the
errorPlacement
and success
functions for showing & hiding the individual tooltip bubbles.使用
errorPlacement
和success
函数来显示和隐藏单个工具提示气泡。
errorPlacement: function(error, element) { var lastError = $(element).data('lastError'), newError = $(error).text(); // current error message $(element).data('lastError', newError); // keep track of the error if (newError !== '' && newError !== lastError) { // new error? $(element).tooltipster('content', newError); // replace message $(element).tooltipster('show'); // show bubble } }, success: function(label, element) { $(element).tooltipster('hide'); // hide bubble when error clears },
You're trying to initialize and re-initialize ToolTipster on the same element for showing two different bubbles on the same element at the same time.您正在尝试在同一元素上初始化和重新初始化 ToolTipster,以便同时在同一元素上显示两个不同的气泡。 Although I'm not clearly seeing the described issue in your demo, I can see how it would lead to problems and confusion.
虽然我在您的演示中没有清楚地看到所描述的问题,但我可以看到它会如何导致问题和混乱。
Here's a workaround.这是一个解决方法。
Surround the input
elements with a container element.用容器元素包围
input
元素。
<div title="Tooltip teste 1">
<input type="text" name="field1" />
</div>
BTW: you don't need the data-rule-required
attribute when you've already declared required
within .validate()
.顺便说一句:当您已经在
.validate()
声明为required
时,您不需要data-rule-required
属性。
Then you can initialize ToolTipster on the input[type="text"]
elements for validation error messages...然后您可以在
input[type="text"]
元素上初始化 ToolTipster 以验证错误消息...
$('input[type="text"]').tooltipster({
trigger: 'custom', // default is 'hover' which is no good here
onlyOne: false, // allow multiple tips to be open on the page
position: 'right'
});
And then separately initialize another ToolTipster instance on the parent container for the hints...然后分别在父容器上初始化另一个 ToolTipster 实例以获取提示...
$('input[type="text"]').parent().tooltipster();
(I'm being more specific with the target here. By targeting only input
, you would also match the type="submit"
element.) (我在这里更具体地针对目标。通过仅针对
input
,您还可以匹配type="submit"
元素。)
Proof-of-concept DEMO: http://jsfiddle.net/2xgcyg6w/概念验证演示: http : //jsfiddle.net/2xgcyg6w/
Well, I achieved exactly what I needed using the errorPlacement and success as Sparky recommended, I kind of mixed what I did with his example:好吧,我按照 Sparky 的建议使用 errorPlacement 和成功实现了我所需要的,我将我所做的与他的示例混合在一起:
$(document).ready(function () { // initialize tooltipster on text input elements $('input').tooltipster({position: 'top'}); var tooltipsterErrorMsg = []; // initialize validate plugin on the form $('#myform').validate({ errorPlacement: function (error, element) { if ($(element).index() === tooltipsterErrorMsg.length) { var tooltipObject = $(element).tooltipster({ trigger: 'custom', multiple: true, position: 'bottom' }); tooltipsterErrorMsg.push(tooltipObject[0]); } tooltipsterErrorMsg[$(element).index()].content($(error).text()).show(); }, success: function (label, element) { tooltipsterErrorMsg[$(element).index()].hide(); }, submitHandler: function (form) { // for demo alert('valid form'); return false; } }); });
#myform { margin: 100px; } input { margin: 20px; } a { display: block; position: absolute; bottom: 0; } .error { color: #900; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script> <form id="myform"> <input type="text" name="field1" title="Tooltip teste 1" data-rule-required="true" data-rule-email="true" /> <input type="text" name="field2" title="Tooltip teste 2" data-rule-required="true" data-rule-minlength="5" /> <br/> <input type="submit" /> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.