Question

我使用jquery / regex进行表单验证：

$(document).ready(function () {
    $('.keyup-numeric').keyup(function () {
        $('span.error-keyup-1').hide();
        var inputVal = $(this).val();
        var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
        if (!numericReg.test(inputVal)) {
            $(this).after('<span class="tiny warning_bubble">Numeric characters only.</span>');
        }

    });
});

如何停止堆叠的warning_bubble范围？小提琴：http://jsfiddle.net/M2Ns5/ 谢谢，

Answer 1

检查下一个元素是否具有warning_bubble类＆amp;然后将其添加到跨度。

$(document).ready(function () {
    $('.keyup-numeric').keyup(function () {
        $('span.error-keyup-1').hide();
        var inputVal = $(this).val();
        var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
        if (!numericReg.test(inputVal)) {
            if (!$(this).next().hasClass('warning_bubble')) {
                $(this).after('<span class="tiny warning_bubble">Numeric characters only.</span>');
            }
        } else {
            $(this).parent().find(".warning_bubble").hide();
        }
    });
});

<强> jsFiddleDemo here

Answer 2

您可以使用其余的html创建警告，并将其样式设置为最初隐藏，然后只显示，或在需要时隐藏警告

HTML

<label>Phone Number:
   <input type="tel" class="keyup-numeric" placeholder="(XXX) XXX-XXXX"/>
   <span class="tiny warning_bubble">Numeric characters only.</span>
</label>

CSS

.warning_bubble {
     color:#d2232a;
     -webkit-border-radius: 12px; 
    border-radius: 12px;
    background-color:#ffdd97;
    padding:5px;
    width:100%;
    display:none;
}

JS

$(document).ready(function () {
    $('.keyup-numeric').keyup(function () {
        $('span.error-keyup-1').hide();
        var inputVal = $(this).val();
        var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
        if (!numericReg.test(inputVal)) {
            $(this).parent().find(".warning_bubble").show();
        } else {
            $(this).parent().find(".warning_bubble").hide();
        }

    });
});

的 JSFiddle Demo

Answer 3

http://jsfiddle.net/MrPolywhirl/PkPU9/

$(document).ready(function () {
    (function(tel) {
        // Validation expression
        var numericReg = /^\d*\d(|.\d*\d|,\d*\d)?$/;
        // Create bubble
        var bubble = $('<span class="tiny warning_bubble" style="display:none">Numeric characters only.</span>');
        $(tel).after(bubble); // Add and hide bubble to the input
       // Add key listener to the text input
        $(tel).keyup(function () {
            var inputVal = $(this).val();
            // Toggle the bubble using jquery show/hide
            bubble[inputVal && !numericReg.test(inputVal) ? 'show' : 'hide']();
        });
    })('.keyup-numeric');
});

Answer 4

对代码的最少更改是在输入后在标签内添加容器：

<span class="warning-container"></span>

将您的后续行更改为空/追加：

$(this).siblings('.warning-container').empty().append('<span class="tiny warning_bubble">Numeric characters only.</span>');

注意： empty().append()是执行html()的更快捷方式。另请注意，虽然这是对原始代码的最少更改，但有许多方法可以使其更高效，更强大。

jquery / Regex，停止事件冒泡

4 个答案: