单个字段的多个弹出窗口

I have a field which fires off a couple popovers depending as the user types:

我有一个字段可以根据用户类型触发几个popovers:

First popover is when a user enters a number, at this time the user gets a popover with a message that the field allows non number inputs

第一个弹出窗口是当用户输入一个数字时,此时用户获得一个弹出框,其中包含该字段允许非数字输入的消息

Second popover is fired when a user enters a lower case letter but can continue to enter letters

当用户输入小写字母但可以继续输入字母时,会触发第二个弹出窗口

And the third popover is fired when the user reaches 10 characters

当用户达到10个字符时,会触发第三个弹出窗口

So far, I have this 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 be 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, the popovers are not working but when I comment out the others, it seems to work but I need to have all 3 working. What am I doing wrong?

现在,弹出窗口不起作用,但当我评论其他时,它似乎工作,但我需要让所有3个工作。我究竟做错了什么?

1 个解决方案

#1

You are using else if, so only the first condition met will be executed. Try taking out else and move your error clearing above your checks.

您正在使用else,因此只会执行第一个条件。尝试取出其他内容并将错误清除移到支票上方。