Textbox附近的验证消息未按预期工作

时间:2016-03-26 06:40:06

标签: jquery html

当文本框上有焦点且文本框为空时,我在文本框附近显示“此字段是必需的”。我不想在该文本框中输入内容时显示该错误消息。我通过这段代码实现了这一点。这里的问题虽然是我的文本框是空的,我一直在键入退格键或任何其他非字符键“需要这个字段”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>');
  }
});

2 个答案:

答案 0 :(得分:1)

您需要在if条件中放置第一条错误消息。

if ($(this).val().length <= 0) {
  $(this).after('<span class="label_error">This field is required</span>');
}

jsFiddle

我改变了你的代码,你想使用这个版本:

<强> 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>');
    }
}