文本框附近的验证消息未按预期工作答案

【问题标题】：validation message near Textbox not working as expected文本框附近的验证消息未按预期工作
【发布时间】：2016-03-26 06:40:05
【问题描述】：

当焦点放在文本框上且文本框为空时，我在文本框附近显示“此字段是必需的”。当已经在该文本框中输入了某些内容时，我不想显示该错误消息。我通过这段代码实现了这一点。不过，对我来说，这里的问题是当文本框为空并且我继续输入退格键或任何其他非字符键时，“此字段是必需的”跨度元素不断堆积，这不好。我该如何解决？

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

【问题讨论】：

标签： jquery html

【解决方案1】：

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

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

jsFiddle

我更改了你的代码，你想使用这个版本：

jsFiddle

【讨论】：

谢谢。您的第一个 jsfiddle 有效，但是当您在文本框中键入一些字符然后清空它时，我试图显示“此字段是必需的”。您知道该怎么做吗？
你的意思是，想在用户输入时也显示消息？ @avi
是的，当用户在文本框中键入一些字符然后他决定退格所有这些字符和空文本框时，我应该能够在专注于文本框时显示消息。
希望这次是你想要的JSFIDDLE@avi
是的，谢谢@jiff。请发布此内容，以便我将其标记为答案。

【解决方案2】：

删除您的事件侦听器链：.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>');
    }
}

【讨论】：