jQuery добавить содержимое после элемента ввода и удалить добавленный контент

Question

Я хочу добавить тег <em> после текстового поля, если пользователь вставил нечисловой формат.

$('.numeric').keypress(function (e) { 
var key_code = e.which; 
if (key_code != 8 && key_code != 0 && (key_code < 48 || key_code > 57)) { 
    $(this).after("<em>type only numeric formatted text<em>"); 
    return false ; 
} 
else { 
    $('em').remove(); 
} 
}); 

В текстовом поле более одного. HTML код:

<div> 
    <label for="Area">Full Area:</label> 
    <input type="text" value="" name="FullArea" id="FullArea" class="numeric"> 
</div> 

В моем коде JQuery есть некоторые вопросы:

1. добавит <em> более чем один раз, после того, как не-числовой формат;

2. удалит все <em> тег, если пользователь вводит цифровой формат (рядом с другими текстовыми полями тоже все em в странице)

Нужна умный способ сделать это функциональность, без проблем [1] и [2 ]. Спасибо.

Answer 1

Я хотел бы предложить, чтобы просто скрыть и показать, что, ... это гораздо дешевле, чем удаление и добавление снова ...

попробовать это demo

var em = $("<em>type only numeric formatted text<em>").hide(); 
$('.numeric').keypress(function (e) { 
    var key_code = e.which; 
    if (key_code != 8 && key_code != 0 && (key_code < 48 || key_code > 57)) { 
     $(this).next("em").show(); 
     return false ; 
    } 
    else { 
     $(this).next("em").hide(); 
    } 
}).after(em); 

Answer 2

Попробуйте это:

('.numeric').keypress(function (e) { 
var next = $(this).next('em'); 
var key_code = e.which; 
if (key_code != 8 && key_code != 0 && (key_code < 48 || key_code > 57)) { 
    if (next.length == 0) 
     $(this).after("<em>type only numeric formatted text<em>"); 
    return false ; 
} 
else { 
    next.remove(); 
} 
}); 

Answer 3

Посмотрите на jQuery Validation Plugin, который сделает именно это (и многое другое!) Для вас.

Настоящая сила jQuery - его возможность подключения, а также тот факт, что уже написано много плагинов. Если кто-то еще изобрел колесо, сэкономить время и использовать их;)