JQuery Проверка Javascript без плагина

Question

У меня есть форма, состоящая из 3 полей ввода и соответствующих классов пролетов рядом с ними. Я создаю проверку только с использованием jquery/javascript no plugins. Есть ли способ, когда сообщения диапазона будут отображаться, если пользователь вводит неверный тип имени, например, если пользовательский ввод 123 в поле userName будет отображаться диапазон с сообщением «Недействительное имя пользователя»? используя только классы не идентификаторы

<input type = 'text' class = 'inputs' id = 'userName'> <span class = 'messageSpan' id = 'userNameMessage'>Invalid Username</span><br><br> 

<input type = 'text' class = 'inputs' id = 'phoneNumber'> <span class = 'messageSpan' id = 'phoneNumberMessage'> Invalid Phone Number </span><br><br> 

<input type = 'text' class = 'inputs' id = 'emailAddress'><span class = 'messageSpan' id = 'emailAddressMessage'> Invalid Email</span><br><br>" 

Вот мой код

$(".messageSpan").hide(); 
$(".inputs")click(function(){ 
$(this).find('.messageSpan').show(); 
}); 

Я попытался тичная .each, но это только показывает все spanMessages когда я нажал одно поле, я хочу что-то сделать spanMessage появляются только при нажатии соответствующего текстового поля.

Answer 1

$('.messageSpan').hide(); 
$('.inputs').click(function(){ 
    $(this).next('.messageSpan').show(); 
}); 

find ищет всех потомков. input - пустой узел (без детей). Ваши промежутки - это братья и сестры, а не дети. next выберет непосредственного брата справа от элемента.

См. jQuery next.

Это альтернативное решение, требующее изменения вашего HTML.

Настройка контейнеров для каждого входа, пара пролетов.

<div class='validate'> 
    <input type='text' /><span>Invalid Username</span> 
</div> 
<div class='validate'> 
    <input type='text' /><span>Invalid Phone Number</span> 
</div> 
<div class='validate'> 
    <input type='text' /><span>Invalid Email</span> 
</div> 

Тогда:

$('div.validate > span').hide(); 
$('div.validate > input').click(function(){ 
    $(this).siblings('span').show(); 
});