Jquery 验证不需要字段工具提示消息问题

Question

我正在使用 jquery 验证并使用 bootstrap 工具提示显示错误消息。这工作正常，但是当我在不需要的字段中插入不正确的值，然后删除文本并将该字段留空时，输入中的突出显示效果消失但工具提示仍然可见。

JS

$('#myform').validate({ // initialize the plugin
  onkeyup: false,
  rules: {
    field1: {
      required: true,
      number: true
    },
    field2: {
      number: true
    }
  },
  errorPlacement: function (error, element) {
    var lastError = $(element).data('lastError'),
        newError = $(error).text();
    $(element).data('lastError', newError);
    if (newError !== '' && newError !== lastError) {
      $(element).tooltip({
        placement: "bottom",
        trigger: "manual"
      }).attr('title', newError).tooltip('fixTitle').tooltip('show');
    }
  },
  success: function (label, element) {
    $(element).tooltip('hide');
  }
});

HTML

<form id="myform">
  <input type="text" name="field1" />
  <input type="text" name="field2" />
  <input type="submit" />
</form>

为了解决我的问题，我尝试使用 unhighlight 方法，但仅在第一次有效，然后在相同的位置重新插入不正确的值时不再显示工具提示字段

 unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element).tooltip('hide');
 }

在第二个字段中键入文本，然后将其删除。 jsfiddle

我该如何解决我的问题？谢谢

Answer 1

可以被认为是一项 hack-job，但是监听 blur 事件并在空时清除工具提示，效果很好：

$("input").blur(function () {
  if (!this.value.trim().length)
    $(this).tooltip("hide");
});

片段

$('#myform').validate({ // initialize the plugin
  onkeyup: false,
  rules: {
    field1: {
      required: true,
      number: true
    },
    field2: {
      required: false,
      number: true
    }
  },
  errorPlacement: function(error, element) {
    var lastError = $(element).data('lastError'),
        newError = $(error).text();
    $(element).data('lastError', newError);
    if (newError !== '') {
      $(element).tooltip({
        placement: "bottom",
        trigger: "manual"
      }).attr('title', newError).tooltip('fixTitle').tooltip('show');
    }
  },
  success: function(label, element) {
    $(element).tooltip('hide');
  }
});
$("input").blur(function() {
  if (!this.value.trim().length)
    $(this).tooltip("hide");
});

#myform {
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<form id="myform">
  <input type="text" name="field1" />
  <input type="text" name="field2" />
  <input type="submit" />
</form>

JsFiddle: https://jsfiddle.net/reo1ck3e/

Jquery 验证不需要字段工具提示消息问题

Jquery validation not required field tooltip message issue

jquery

jquery-validate

twitter-bootstrap