jQuery 插件 - 簡易欄位檢核訊息顯示

前篇文章提到有個 blur() + alert() IE Only 網頁在 Edge/Chrome 會發生 alert 無窮迴圈的悲劇，讓我心生寫個簡單通用程式庫解決這類需求的念頭。規格如下：

• 希望搭配原有檢核邏輯，程式不要大改，換掉原本 alert 訊息顯示就好
• 要能明確指出檢核失敗欄位所在位置
• 支援將焦點移回無效欄位，強迫輸入正確才可離開的模式
• 力求簡便易用，希望單一 .js 搞定，不需額外載入 .css
• 能支援 IE11 更佳

這樣的需求用純 JavaScript 理論上也寫得出來，但我決定寫成 jQuery 插件，節省程式碼跟腦細胞。

直接看結果，車牌欄位採強迫校正，會加上遮罩阻止操作，並將焦點移回車牌欄位；其餘則是在欄位前方標註訊息，點擊可移除。標註位置以欄位左上為原則，則欄位位於頁頂空間不足，則標於左下角。

呼叫方式如下：

    <table>
        <tr>
            <td>車牌1</td><td><input id="c1" /></td>
            <td>欄位X</td><td><input id="x1" /></td>
        </tr>
        <tr>
            <td>說明</td>
            <td colspan="3">
                <textarea id="t1" style="width: 100%" rows="4"></textarea>
            </td>
        </tr>
        <tr>
            <td>欄位A</td><td><input id="f1" /></td>
            <td>欄位B</td><td><input id="f2" /></td>
        </tr>
    </table>
    <button onclick="validate()">測試檢核</button>
    <script>
        $('#c1').blur(function () {
            var inp = $(this);
            if (!/^[-0-9A-Z]{5,7}$/.exec(inp.val())) {
                inp.showInvalidMessageTag("車牌格式有誤，請更正!", { forceChange: true });
            }
        });
        function validate() {
            $('input,textarea').not('#c1').each(function () {
                var inp = $(this);
                if (!inp.val()) 
                    inp.showInvalidMessageTag("欄位不可空白");
            });
        }
    </script>   

為擴大相容性，用 IE11 嘛也通。

[2022-06-29 更新]

採納讀者 78 建議，加上 10 秒訊息自動消失，預設開啟，但可透過參數 inp.showInvalidMessageTag("檢核有誤!", { autoHide: false }) 停用，仿效 NOTY 顯示倒數進度，滑鼠滑過時會停止倒數，回歸點選關閉：

jQuery 插件完整程式碼如下，也有線上展示，但這個版本仍屬雛型，還沒上戰爭歷練過，歡迎大家試玩並提供建議：

        jQuery.fn.showInvalidMessageTag = function (msg, options) {
            //ver 1.1 add auto clear
            options = $.extend({ autoHide: true, forceChange: false }, options);
            var forceChange = options.forceChange;
            if (forceChange) options.autoHide = false;
            //add style block
            var styleBlock = $('#invld-msg-styles');
            if (!styleBlock.length) {
                $("\
<style id='invld-msg-styles'>\
.ivmt-tag { font-size:10pt; position: absolute; cursor: pointer; z-index: 99999; opacity: 0.85 }\
.ivmt-tag .arw { color: #e53939; font-size: 12px; padding-left: 2px }\
.ivmt-tag .msg { background-color: #e53939; color: white; padding: 4px 12px; width: auto; margin-top: -4px; border-radius: 3px}\
.ivmt-tag .prog { width: 100%; background-color: yellow; height: 2px; opacity: 0.5; }\
.ivmt-mask-layer { position: absolute; z-index: 65535; opacity: 0.3; background-color: #888; top: 0; left: 0; width: 100vw }\
</style>").prependTo('body');
            }
            var elem = $(this);
            var maskLayer = $('.ivmt-mask-layer');
            if (forceChange && maskLayer.length) return;
            var pos = elem.offset();
            var bgc = '#e53939';
            var tag = $('<div class="ivmt-tag" style="visibility:hidden;"><div class="arw">▲</div><div class="msg"><div class="text"></div></div>');
            tag.find('.msg .text').text(msg);
            if (options.autoHide) tag.find('.msg').append('<div class="prog"></div>');
            tag.appendTo('body');
            var tagPos = pos.top < tag.height() ? 'bottom' : 'top';
            var top = pos.top + elem.height();
            if (tagPos == 'top') {
                top = pos.top - tag.height() + 4;
                var msgBlock = tag.find('.msg');
                msgBlock.css('marginTop', '0');
                tag.find('.arw').text('▼').css('marginTop', '-5px').before(msgBlock);
            }
            if (forceChange) {
                maskLayer = $('<div class=ivmt-mask-layer></div>');
                maskLayer.css({ height: Math.max(window.innerHeight, document.body.scrollHeight) + 'px' }).appendTo('body');
            }
            if (!forceChange && options.autoHide) {
                var count = 100;
                var hnd = setInterval(function() {
                    count--;
                    tag.find('.prog').css('width', count + '%');
                    if (count <= 0) {
                        clearInterval(hnd);
                        tag.remove();
                    }
                }, 100);
                tag.hover(function() { 
                    clearInterval(hnd);
                    tag.find('.prog').remove();
                });
            }

            tag.css({ visibility: 'visible', top: top + 'px', left: pos.left + 'px' })
            .add(maskLayer).click(function () {
                tag.remove();
                if (forceChange) {
                    elem.focus();
                    maskLayer.remove();
                }
            });
        }

A simple jQuery plugin to show invalid message on the input fields.