Невозможно проверить несколько, если еще условие в JQuery

Question

Я пытаюсь проверить несколько условий в JQuery, но он не возвращает желаемый результат. все, что я ввел, всегда переходило в другое состояние.

$(function() {
  $('#installment').on("keydown keyup", check);
  function check() {
    var inst = Number($("#installment").val());
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

Answer 1

Проблема в keydown, запущенном перед value обновлением .Так что, если вы введете «2».Значение вернет '' И Number('') равно 0, поэтому оно всегда будет равно else Просто удалите событие нажатия клавиш, используя только keyup

$(function() {
  $('#installment').on("keyup", check);

  function check() {
    var inst = Number($("#installment").val());
    console.log(inst)
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

Поскольку @ Radu Diță упоминается в комментарии, что 12 никогда не может быть действительным, если 1 не так, чтобы исправить этоВы можете использовать String.prototype.startsWith()

$(function() {
  $('#installment').on("keyup", check);
  function check() {
    var inst = Number($("#installment").val());
    console.log(inst)
    if (inst === 2 || inst === 4 || inst === 6 || '12'.startsWith(String(inst))) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

Answer 2

$(function() {
    var val = $("#installment").val();
  $('#installment').on("keydown keyup",
  function () {
    var inst = Number($("#installment").val());
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      alert("OK");
     return false;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      //return false;
    }
  });
});

Answer 3

Попробуйте это:

$(function() {
  $('#installment').on("keydown keyup", check);
  function check(event) {
    var inst = $(this).val();
    if (inst === "") {
        return;
    }
    if (inst == 2 || inst == 4 || inst == 6 || inst == 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

В этом коде if начинает работать, но только для 2, 4 и 6. Это не будет работать для 12, так как первый ввод - 1, который вы не проверяете, вместо того, чтобы проверять ввод в keydown и keyup, попробуйте использовать blur, как только пользователь закончит что-то писать, проверка будет работать так, как вам нравится. .

$(function() {
  $('#installment').on("blur", check);
  function check(event) {
    var inst = Number($(this).val());
    if (inst === 2 || inst === 4 || inst === 6 || inst === 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>

Answer 4

Проблема в том, что ваше событие keydown срабатывает до изменения значения входа.Используйте keyup (или еще лучше input) вместо:

$(function() {
  $('#installment').on("input", check);

  function check() {
    var inst = parseInt($("#installment").val());
    if (inst == 2 || inst == 4 || inst == 6 || inst == 12) {
      return true;
    } else {
      $("#installment").val('');
      alert("you can not set wrong value");
      return false;
    }
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
  <td>Number of Installment</td>
  <td><input type="text" name="installment" id="installment"></td>
</tr>