工具提示器，用于显示字段的工具提示和显示 Jquery 验证中的错误

Question

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

我错过了什么？

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

这是 fiddle：http://jsfiddle.net/macmessa/m368ntxw/

Answer 1

两个问题...

您没有正确使用 showErrors 函数。它仅用于构建错误列表，而不用于单独的错误放置。使用 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
},

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

这里有一个解决方法。

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

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

顺便说一句：如果您已经在 .validate().

中声明了 required，则不需要 data-rule-required 属性

然后您可以在 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" 元素。）

概念验证演示：http://jsfiddle.net/2xgcyg6w/

Answer 2

好吧，我按照 Sparky 的建议使用 errorPlacement 和 success 实现了我所需要的，我将我所做的与他的示例混合在一起：

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

工具提示器，用于显示字段的工具提示和显示 Jquery 验证中的错误

Tooltipster for both showing tooltips for fields and showing errors in Jquery validation

javascript

jquery

jquery-validate

tooltipster