Jquery проблема очистки поля

Question

Вы видите, что приведенный ниже фрагмент написан, чтобы запретить символы и разрешить только цифры. Он попадает в условие if, но поле не очищается.

$(document).on('keyup', '.childfield', function(e) {

  if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    //display error message
    console.log("Entered");
    return false;

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="childfield" value="0">

Надеюсь, кто-то может найти то, что я делаю неправильно.

Answer 1

Пожалуйста, попробуйте код ниже для чисел c только значения

$(document).on('keyup', '.childfield', function(e) {

  if (/\D/g.test(this.value))
  {
    this.value = this.value.replace(/\D/g, '');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="childfield" value="0">

Answer 2

Вот полезный способ, который также может обрабатывать вставку

Вы не должны ajax немедленно. Либо откликнись, либо жди ввода

const re = /[^0-9a-zA-Z]+/g
$(document).on('input', '.childfield', function(e) {
  let val = this.value;
  if (re.test(val)) {
    console.log("invalid input")
    this.value=val.replace(re,"")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="childfield" value="0">

Отправка при вводе

const re = /[^0-9a-zA-Z]+/g
$(function() {
  $(document).on('input', '.childfield', function(e) { 
    let val = this.value;
    if (re.test(val)) {
      console.log("invalid input")
      this.value = val.replace(re, "")
    }
  });
  $("#form1").on("submit", function(e) {
    e.preventDefault(); // stop submitting
    if (re.test($("#form1 .childField").val())) { // not even possible but still
      return;
    }
    // $.ajax()... // here you can send
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" class="childfield" value="0" />
</form>