当文本框上有焦点且文本框为空时,我在文本框附近显示“此字段是必需的”。我不想在该文本框中输入内容时显示该错误消息。我通过这段代码实现了这一点。这里的问题虽然是我的文本框是空的,我一直在键入退格键或任何其他非字符键“需要这个字段”span元素继续堆积,这是不好的。我该如何解决这个问题?
HTML
<input data-required="true" type="text" name="foo" />
<select data-required="true" >
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
jquery的
$("input[data-required='true'],select[data-required='true']").focus(function() {
$(this).after('<span class="label_error">This field is required</span>');
}).blur(function() {
$(this).next('span').remove();
}).change(function() {
if ($(this).val().length > 0) {
$(this).next('span').remove();
} else {
$(this).after('<span class="label_error">This field is required</span>');
}
}).keyup(function() {
if ($(this).val().length > 0) {
$(this).next('span').remove();
} else {
$(this).after('<span class="label_error">This field is required</span>');
}
});
答案 0 :(得分:1)
您需要在if
条件中放置第一条错误消息。
if ($(this).val().length <= 0) {
$(this).after('<span class="label_error">This field is required</span>');
}
我改变了你的代码,你想使用这个版本:
<强> jsFiddle 强>
答案 1 :(得分:0)
删除你的事件监听器链:.focus,.blur,.change,.keyup,更改应该是你需要的,用于文本输入的选择和模糊。每次从选择或输入中移除焦点时,都会触发所有这些焦点,从而导致创建多个跨距。当你调用$(this).next('span')时,你只删除元素生效后的第一个跨度。
$(function(){
$("select[data-required='true']").change(function() {
req( $(this) );
});
$("input[data-required='true']").blur(function() {
req( $(this) );
});
});
function req( item )
{
//item = $("input[data-required='true']");
item.next('span').remove();
if ($.trim(item.val()).length <= 0) {
item.after('<span class="label_error">This field is required</span>');
}
}