jquery / Regex, остановка событий

Question

jquery / Regex, остановка событий

0

У меня есть проверка формы с помощью 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/. Спасибо,

Mark 23 сен. 2013, в 21:58

Источник

Теги:

javascript

jquery

regex

4 ответа

0

Наименьшие изменения в вашем коде будут заключаться в том, чтобы добавить контейнер внутри метки после ввода:

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

И измените вашу строку после пустой /append:

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

Примечание: empty().append() - это более быстрый способ делать html(). Также имейте в виду, что, хотя это минимальные изменения в вашем исходном коде, есть много способов сделать его более эффективным и более надежным.

vol7ron 23 сен. 2013, в 18:21

0

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');
});

Mr. Polywhirl 23 сен. 2013, в 17:59

0

Проверьте, имеет ли следующий элемент класс warning_bubble и затем добавляет его.

$(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 здесь

Krishna 23 сен. 2013, в 17:58

Ещё вопросы

Patrick Evans · Accepted Answer · 2013-09-23T17-18-00.000Z

У вас может быть предупреждение, созданное с остальной частью 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