Twitter Bootstrap Question posted in

Twitter bootstrap – real-time validation using bootsrap popover

I want to validate an input field on keypress and then display a popover. I have the blow code:

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>

Le 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

I would like the popover to appear when the user is entering data. I will also be including an image in the popover. Right now, the popover is appearing on click.

Tags:

2

Answers


  1. 0

    What you are looking for (via your bootply comment example ) is done with jQuery Validate plugin. You can see examples here: How to use Twitter Bootstrap popovers for jQuery validation notifications?

    Login or Signup to reply.
  2. 0

    The problem is that your popover code just initializes the popover, but it does not trigger the display of it. You would have to trigger the ‘show’ as well. Something like this:

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

    I have updated your fiddle to demonstrate: https://jsfiddle.net/ptk3f2vm/1/

    Do not that this is just a quick and dirty demo. No need to re-initilaize that popover on each keypress, that would be much better done outside the event handler. And you probably don’t want that flicker of the popover on each keypress either. Not mentioning the hiding and destroying of the popover once the ‘error’ is fixed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search