使用 bootstrap popover 进行实时验证

Question

我想在按键时验证输入字段，然后显示弹出窗口。我有打击代码：

HTML

<form id="coparent">
 <p>This is your last name before you were married <br /> <input type="text" ng-model="comaiden" name="comaiden" id="comaiden" maxlength="70" /><br />
 <span style="font-size:0.8em !important">Number of characters remaining for this field: {{70 - comaiden.length}}</span><br />
 <span class="comaidenError" style="font-size:.9em !important;"></span></p>
</form>

勒JavaScript

 $('#comaiden').on("keypress",function (f) {
    if (!firstCapital(f)) {
       $("#comaiden").popover({ title: 'Twitter Bootstrap Popover', 
                        content: "It's so simple to create a tooltop for my website!" });
    }
 });

function firstCapital(e) {
 var inp = String.fromCharCode(e.which);
 if (/[A-Z]/.test(inp[0])) return true;
  else return false;
 };

JSFiddle

我希望在用户输入数据时出现弹出窗口。我还将在弹出窗口中包含一张图片。现在，弹出窗口在点击时出现。

Answer 1

您正在寻找的内容（通过您的 bootply 评论示例）已通过 jQuery 验证插件完成。您可以在此处查看示例：How to use Twitter Bootstrap popovers for jQuery validation notifications?

Answer 2

问题是您的弹出框代码只是初始化弹出框，但不会触发它的显示。您还必须触发 'show'。像这样：

$("#comaiden").popover('show');

我已经更新了你的 fiddle 来演示：https://jsfiddle.net/ptk3f2vm/1/

不要认为这只是一个快速而肮脏的演示。无需在每次按键时重新初始化该弹出窗口，这在事件处理程序之外完成会更好。而且您可能也不希望每次按键时弹出窗口都闪烁。更不用说一旦 'error' 固定后弹出窗口的隐藏和销毁。

使用 bootstrap popover 进行实时验证

real-time validation using bootsrap popover

html

jquery

popover

twitter-bootstrap