文本框 onkeyup 事件旁边的错误消息

Question

我有一些文本框，我想在它旁边显示 onkeyup 事件的错误提示，但运气不好，它不起作用。我有这个作为参考：

$(function() {
  $("#name").next('span').hide();
  $("#name").keyup(function() {
    var input = $(this).val();
    var span = $(this).next('span');

    if (name == "") {
      span.text("Please enter your name").show();
      return;
    }
    span.text('').hide();
  });

  $("#age").next('span').hide();
  $("#age").keyup(function() {
    var input = $(this).val();
    var span = $(this).next('span');

    if (age == "") {
      span.text("Please enter your age").show();
      return;
    }

    span.text('').hide();

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" name="name" />
<hr>
<span></span>
<input type="text" id="age" name="age" />
<span></span>

Answer 1

您使用了错误的变量名称来检查 name 字段和 age 字段的值。

此外，名称字段的 span 在 hr 之后，它应该紧挨着输入字段。

检查下面的代码片段，查看添加的评论；

注意 Regex .replace(/\s/g,'') 用于删除 if 条件中的所有空格。

$(function() {
  $("#name").next('span').hide();
  $("#name").keyup(function() {
    var input = $(this).val();
    var span = $(this).next('span');

    if (input.replace(/\s/g,'') == "") { // wrong variable, name is undefined, should be input, also the regex is for removing all whitespaces;
      span.text("Please enter your name").show();
      return;
    }
    span.text('').hide();
  });

  $("#age").next('span').hide();
  $("#age").keyup(function() {
    var input = $(this).val();
    var span = $(this).next('span');

    if (input.replace(/\s/g,'') == "") { // same here
      span.text("Please enter your age").show();
      return;
    }

    span.text('').hide();

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" name="name" />
<span></span> <!-- span should be here, before the hr line break -->
<hr>

<input type="text" id="age" name="age" />
<span></span>

文本框 onkeyup 事件旁边的错误消息

Error message beside textbox onkeyup event

html

javascript

jquery

textbox

onkeyup