javascript - 当我从表单中显示/隐藏一些 HTML 时，CHANGE 事件阻止 SUBMIT 事件

Question

我有一个问题。我附上了带有示例代码的代码笔。

如果我在输入中输入一个小于 50 的值并立即单击发送按钮，将调用 CHANGE 事件，显示一条错误消息并在输入被覆盖为可能的最小值，但 SUBMIT 事件不会发生。如果我再次输入一个低于 50 的值，CHANGE 事件和 SUBMIT 事件现在都将被触发。

如果我现在给出的值在 50 - 150 的允许范围内，则错误消息将消失，并且只会再次发生 CHANGE 事件。如果我再次给出允许范围内的数字，则会调用 CHANGE 事件和 SUBMIT 事件。

我只需要解决，以便始终调用 submit 事件。

const $form = $(".test-form");
const max = 150;
const min = 50;

$form
  .on("change", "input", function () {
    console.log("change");

    const setVal = $(this).val();

    if (setVal < min) {
      $(this).val(min);
      $(".error-min").show();
    }
    if (setVal > max) {
      $(this).val(max);
      $(".error-max").show();
    }
    if (setVal >= min) {
      $(".error-min").hide();
    }
    if (setVal <= max) {
      $(".error-max").hide();
    }
  })
  .on("submit", function (e) {
    e.preventDefault();
    console.log("submit");
  });

input {
  display: block;
  margin-bottom: 20px;
}

.error {
  color: red;
  margin-bottom: 20px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<form class="test-form">
  <input type="number" value="100">
  <p class="error error-min">under min val (50)</p>
  <p class="error error-max">under max val (150)</p>
  <button>SUBMIT</button>
</form>

https://codepen.io/dominiklev/pen/rNvOGPY

Answer 1

问题是因为按钮移动了。依次事件，change 事件首先发生，显示红色验证消息，按钮 向下移动。用户单击鼠标然后错过了 button，因此不会引发 click 事件。

避免这种情况发生的快速修复方法是将 p 元素更改为内联元素，以便它们出现在 input 元素旁边，一个 span 例如:

const $form = $(".test-form");
const max = 150;
const min = 50;

$form.on("change", "input", function() {
  const setVal = $(this).val();
  console.log('change');

  if (setVal < min) {
    $(this).val(min);
    $(".error-min").show();
  }
  if (setVal > max) {
    $(this).val(max);
    $(".error-max").show();
  }
  if (setVal >= min) {
    $(".error-min").hide();
  }
  if (setVal <= max) {
    $(".error-max").hide();
  }
}).on("submit", function(e) {
  e.preventDefault();
  console.log("submit");
});

input {
  display: inline-block;
  margin-bottom: 20px;
}

button {
  display: block;
}

.error {
  color: red;
  margin-bottom: 20px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<form class="test-form">
  <input type="number" value="100">
  <span class="error error-min">under min val (50)</span>
  <span class="error error-max">under max val (150)</span>
  <button>SUBMIT</button>
</form>