Сообщение об ошибке рядом с событием onkeyup текстового поля - PullRequest
Новая
       27

Сообщение об ошибке рядом с событием onkeyup текстового поля

0 голосов
/ 23 апреля 2019

У меня есть текстовые поля, в которых я хочу показать сообщение об ошибке рядом с событием 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>

1 Ответ

0 голосов
/ 23 апреля 2019

Вы используете неправильные имена переменных для проверки значений полей 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>
...