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

Question

我有文本框，我想在它旁边显示错误提示onkeyup事件，但没有运气，它不起作用。我有这个作为我的参考：I want to show error message beside my textbox rather than alert in onkeyup event

$(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之后，它应该在输入字段旁边。

查看下面的代码段，查看添加的评论;

注意正则表达式.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>