输入验证结合jQuery UI Tooltips导致双重提示框问题

这个问题我之前也碰到过，核心就是原生表单验证的提示和我们自定义的Tooltip抢着显示。要解决这个问题，我们需要禁用原生的表单提示，同时保留表单验证的逻辑，把提示的工作完全交给jQuery UI Tooltips来做。下面是具体的实现步骤：

1. 禁用浏览器原生表单提示 #

首先在你的<form>标签上添加novalidate属性，这样浏览器就不会弹出它自带的提示框了，但表单的验证规则（required、pattern这些）依然有效，我们可以通过JS来获取验证结果：

<form id="myForm" novalidate>
  <input type="text" id="myInput" required pattern="[A-Za-z]+" placeholder="请输入字母">
  <button type="submit">提交</button>
</form>

2. 初始化jQuery UI Tooltips #

先确保你已经引入了jQuery和jQuery UI的相关文件，然后初始化Tooltip，并且设置好支持HTML格式的自定义提示内容（比如加粗<strong>、换行<br>）：

$(function() {
  // 初始化Tooltip，允许渲染HTML内容
  $("#myInput").tooltip({
    content: function() {
      const input = $(this);
      // 根据不同的验证失败类型返回对应提示
      if (!input[0].validity.valid) {
        if (input[0].validity.valueMissing) {
          return "<strong>必填项！</strong><br>请填写此字段";
        } else if (input[0].validity.patternMismatch) {
          return "<strong>格式错误！</strong><br>只能输入英文字母";
        }
      }
      return "";
    },
    // 调整提示框的显示/隐藏延迟，让交互更流畅
    show: { delay: 0 },
    hide: { delay: 0 }
  });
});

3. 监听验证事件，控制Tooltip显示 #

我们需要在用户操作时（输入框失焦、表单提交）检查输入有效性，手动控制Tooltip的显示和隐藏：

// 输入框失去焦点时验证
$("#myInput").on("blur", function() {
  const input = $(this);
  if (!input[0].validity.valid) {
    input.tooltip("open");
  } else {
    input.tooltip("close");
  }
});

// 表单提交时全局验证
$("#myForm").on("submit", function(e) {
  const input = $("#myInput");
  if (!input[0].validity.valid) {
    e.preventDefault(); // 阻止表单提交
    input.tooltip("open");
    input.focus(); // 让输入框获焦，方便用户修改
  }
});

额外优化：实时输入验证 #

如果想要用户输入过程中就实时提示错误，可以添加input事件监听：

$("#myInput").on("input", function() {
  const input = $(this);
  // 输入内容不为空但验证不通过时，显示提示
  if (input.val().length > 0 && !input[0].validity.valid) {
    input.tooltip("open");
  } else {
    input.tooltip("close");
  }
});

这样处理之后，就只会显示我们自定义的、支持HTML格式的jQuery UI Tooltip，再也不会出现浏览器原生提示框和自定义提示框并存的问题了。

内容的提问来源于stack exchange，提问作者Jan