jquery - multiple popovers for a single field -

i have field fires off couple popovers depending user types:

first popover when user enters number, @ time user gets popover message field allows non number inputs

second popover fired when user enters lower case letter can continue enter letters

and third popover fired when user reaches 10 characters

so far, have code:

jsfiddle

<input type="text" data-placement="bottom" data-trigger="manual" data-content="" name="momlastname" id="momlastname" ng-model="momlastname" />  (function () {      function firstcapital(word) {         return /^[a-z]/.test(word);     };       function numberonly(e) {         var inp = string.fromcharcode(e.which);         if (/[0-9]/.test(inp)) return true;         else return false;     };      $('#momlastname').keypress(function (f) {          switch ($(this).val().length) {             case 1:                 message = "lower letter";                 break;             case 10:                 message = "10 characters have been reached";                 break;         }          if (numberonly(f)) {             f.preventdefault();             $('#momlastname').popover({                 trigger: 'manual',                 content: function () {                     return "enter text only.  numbers cannot entered.";                 }             });             $('#momlastname').popover('show');             $('#momlastname').addclass('error');          } else if ($(this).val().length == 1 && !firstcapital($(this).val())) {             $('#momlastname').popover({                 trigger: 'manual',                 content: function () {                     return message;                 }             });             $('#momlastname').popover('show');             $('#momlastname').addclass('error');         } else if ($(this).val().length == 70) {             $('#momlastname').popover({                 trigger: 'manual',                 content: function () {                     return message;                 }             });             $('#momlastname').popover('show');             $('#momlastname').addclass('error');         } else {             $('#momlastname').popover('hide');             $('#momlastname').removeclass('error');         }      });  }); 

right now, popovers not working when comment out others, seems work need have 3 working. doing wrong?

you using else if, first condition met executed. try taking out else , move error clearing above checks.