bootstrap popover content not changing

Question

I would like to show two different messages on the same input field but the content message for the two popovers are the same when in fact they should be different. The first popover is when the first character is lower case and the second popover is fired when 5 characters are reached. The only message I am seeing is lower case for both popovers. Below is my code:

JSFIDDLE

<input type="text" data-placement="bottom" data-trigger="manual" data-content="" name="momlastname" id="momlastname" ng-model="momlastname" maxlength="70" />

(function(){
      function firstCapital(e) {
                var inp = String.fromCharCode(e.which);
                if (/[A-Z]/.test(inp[0])) return true;
                else return false;
            };
    var message;
    $('#momlastname').keyup(function (f) {
                    //console.log($(this).val().length);
        switch ($(this).val().length) {
    case 1:
        message = "lower";
                break;
     case 5:
        message = "max reached";
                break;
        }


                    if ($(this).val().length == 1 && !firstCapital($(this).val())) {

                            $('#momlastname').popover({
                                trigger:'manual',
                                content:function(){
                                    return "lower letter";
                                }
                            });
                            $('#momlastname').popover('show');
                             $('#momlastname').addClass('error');

                    }
                  else if ($(this).val().length == 5) {
                            $('#momlastname').popover({
                                trigger:'manual',
                                content:function(){
                                    return message;
                                }
                            });
                            $('#momlastname').popover('show');
                            $('#momlastname').addClass('error');
                    }
                    else {
                        $('#momlastname').popover('hide');
                         $('#momlastname').removeClass('error');
                    }
                });
})();

Answer 1

You need to return your message variable instead of string like "lower". There is working example.

jsfiddle.net/xksfj23e/10/