用于表单验证的引导工具提示答案

【问题标题】：Bootstrap tooltip for form validation用于表单验证的引导工具提示
【发布时间】：2013-03-05 09:45:04
【问题描述】：

我对 bootstrap 还很陌生，似乎无法做到这一点。我在表单验证中使用工具提示 javascript 功能，当输入字段中存在验证错误时会弹出，我希望在输入字段中出现验证检查错误时出现工具提示 onBlur 并在焦点上消失

我的 HTML 是：

<input class="span2" id="formName" rel="tooltip" data-placement="top" type="text"  placeHolder="" onBlur="return validateName();" >

我的 javascript 是

function validateName()
        {
        var x=document.getElementById("formName").value;
        if (x==null || x==""){
          $('#formName').tooltip({ 'title': 'Name Must Not Be Empty!' });
        } else { $('#formName').tooltip('hide') }   
    }

目前它遵循鼠标悬停时出现的默认行为，我想让它在光标离开输入字段时出现

【问题讨论】：

标签： javascript jquery jquery-ui twitter-bootstrap

【解决方案1】：

我想你应该通过这个http://api.jquery.com/blur/

<html>
  <head>
    <title>temp-stackoverflow</title>
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <input type="field" class="text-field">toggle cursor in and out of text box</input>
  </body>
  <script type="text/javascript">
    $('.text-field').blur(function() {
      $('body').attr('bgcolor', "#"+((1<<24)*Math.random()|0).toString(16))
    });
  </script>

【讨论】：

【解决方案2】：

将事件触发器更改为onkeyup：

<input class="span2" id="formName" rel="tooltip" data-placement="top" type="text"  placeHolder="" onkeyup="return validateName();" >

【讨论】：

正如我所提到的，手头的问题不是工具提示功能，它出现在输入标签上的 mouseover[hover] 上，我想要的是它应该出现在模糊或光标离开相关输入时标记...
模糊很难追踪。提到某人使用 tab 键导航到表单，鼠标永远不会进入或离开输入字段！您真正可以触发的唯一动作是在输入中按下某个键时...（或由于通过鼠标粘贴剪贴板而导致内容更改）