Question

我使用tooltipster插件显示字段提示以及底部的另一个工具提示来显示来自jquery validate插件的错误，但由于某种原因，所有消息更新都发生在第一个错误工具提示上。

我错过了什么？

＆＃13;

$(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;
    }
  });

});

＆＃13;

#myform {
    margin: 100px;
}
input {
    margin: 20px;
}
a {
    display: block;
    position: absolute;
    bottom: 0;
}

.error {
  color: #900;
}

＆＃13;

<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>

＆＃13;

这里是小提琴：http://jsfiddle.net/macmessa/m368ntxw/

Answer 1

两个问题......

您正在使用showErrors功能不正确。它仅用于构造错误列表，而不是用于单个错误放置。使用errorPlacement和success功能进行展示＆amp;隐藏个人工具提示泡沫。

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
},

您正尝试在同一元素上初始化并重新初始化ToolTipster，以便同时在同一元素上显示两个不同的气泡。虽然我在演示中没有清楚地看到所描述的问题，但我可以看到它会如何导致问题和混乱。

这是一种解决方法。

使用容器元素包围input元素。

<div title="Tooltip teste 1">
    <input type="text" name="field1" />
</div>

BTW：当您在data-rule-required内宣布required时，您不需要.validate()属性。

然后，您可以在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'
});

然后在父容器上单独初始化另一个ToolTipster实例以获取提示......

$('input[type="text"]').parent().tooltipster();

（我对此处的目标更加具体。通过仅定位input，您还可以匹配type="submit"元素。）

概念证明DEMO：http://jsfiddle.net/2xgcyg6w/

Answer 2

好吧，我完全按照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>

Tooltipster用于显示字段的工具提示并在Jquery验证中显示错误

2 个答案: