Question

我的表单由3个输入字段和相应的span类组成。我只使用jquery / javascript无插件创建验证。如果用户输入无效的名称类型，是否有一种方法可以显示跨区消息，例如，如果userName字段上的用户输入123将出现具有消息无效用户名的跨区？仅使用不是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();
 });

我已经尝试过.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();
});

没有插件的Jquery Javascript验证

1 个答案: