Блог

У меня есть форма, разделенная на 5 частей, как анкета. В конце каждого вопроса есть кнопка для перехода к следующему, однако мне нужно, чтобы кнопка появлялась только в том случае, если пользователь вводит хотя бы 1 число в поле ввода.

Кодекс должен соответствовать тому, что указано ниже:

1. Не разрешается вводить символы, которые не находятся в диапазоне от 0 до 9.
2. Если пользователь ничего не вводит и нажимает ENTER, он не может перейти к следующему вопросу.
3. Если пользователь вводит число, например, 50, и стирает 50, кнопка должна снова исчезнуть.
4. Если пользователь не пишет никакого числа и выбирает предварительно заполненное число (которое было в кэше браузера), кнопка должна появиться.

Я попробовал два разных кода.

Первые соответствуют 3) и 4), но нет 1) и 2):

 <input required type="text" name="idade_aluno_lp" id="idade_aluno_lp" placeholder="Digite a idade do aluno" onkeyup="check()" />

<div class="text-end mt-3">
  <input type="submit" id="submit2" class="btn btn-primary btn-lg" value="Enviar Resposta" style="display: none;" />
</div>

<script type="text/javascript">
  function check() {
    var count = document.getElementById('idade_aluno_lp');
    if (count.value.length < 2) {
      document.getElementById('submit2').style.display = 'none';
    } else {
      document.getElementById('submit2').style.display = 'block';
    }
  }
</script>
 

Вторые соответствуют 1) и 2), но не 3) и 4):

 <input required type="text" name="idade_aluno_lp" id="idade_aluno_lp" placeholder="Digite a idade do aluno" onkeypress="return justNumbers(event)" maxlength="2" />

<div class="text-center mt-3">
    <input type="submit" id="submit2" class="btn btn-primary btn-lg" value="Enviar Resposta" style="display: none;" />
</div>

<script type="text/javascript">
    function justNumbers(evt2) {
        var age = document.getElementById('idade_aluno_lp');

        var key = evt2.keyCode;

        if (key >= 48 amp;amp; key <= 57) {

            if (age.value.length < 0) {
                document.getElementById('submit2').style.display = 'none';
            } else {
                document.getElementById('submit2').style.display = 'block';
            }

        } else {
            return false;
        }
    }
</script>
 

Я попытался выполнить ту же процедуру, что и выше, onkeyup чтобы выполнить 1), но это не сработало. Я пытался использовать onchange , но это тоже не сработало.

Как я могу это решить?

 // Check if the value is a number
function isNumber(str) {
  const regex = new RegExp('^(0|[1-9]\d*) 

 .display-none {
    display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" />
</div>
<div>
  <input type="submit" value="submit" class="display-none" />
</div> 

Попробуйте это, это должно вам помочь.

 $('input').on('input', function(e)
 

 $('input').on('change', function(e)                
 

 var element = document.getElementById('elementId');
element.classList.add('className');
element.classList.remove('className');
 

 var element = document.getElementById('elementId');
element .addEventListener('change', function(){
  //do something
});
 

Вам следует добавить <form> тег, который вы можете использовать для проверки правильности ввода, прежде чем разрешить отправку формы. Для этого вы можете использовать ту же check() функцию, но с некоторыми изменениями.

Я изменил onkeyup на oninput , который более точно определяет #4 (пользователь выбирает предложенный вариант автозаполнения).

Когда пользователь нажимает ENTER, он пытается отправить форму, которая обрабатывается onsubmit обработчиком в <form> теге. Это вызывает check() функцию, которая возвращает true , если входные данные являются допустимыми или false недопустимыми. Если он вернется false , это предотвратит отправку формы.