文本框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

您使用错误的变量名来检查{​​{1}}字段和name字段的值。

此外，名称字段age在span之后，应该在输入字段旁边。

检查以下代码段，查看添加的注释；

通知正则表达式 hr，以删除if条件中的所有空白。

.replace(/\s/g,'')

$(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();

  });
});