沒有插件的Jquery Javascript驗證

Question

我的表單由3個輸入字段和旁邊的對應span類組成。我使用jquery/javascript no插件創建驗證。 如果用戶輸入無效類型的名稱，如果userName字段上的用戶輸入123帶有消息無效用戶名的跨度將出現，是否有方法可以顯示span消息？只用類沒有ID的

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

我已經試過UNG。每個但它只顯示了所有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(); 
});