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

debugcn 发表于 Dev

蓝米妮

我有一些文本框，我想在它的 onkeyup 事件旁边显示错误提示，但没有运气，它不起作用。我有这个作为我的参考：我想在我的文本框旁边显示错误消息而不是在 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>

托基尔

您正在使用错误的变量名称来检查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();

  });
});

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。