javascript - 是否可以在表单提交时检测哪个输入字段无效？

Question

使用下面的代码，我可以使用 .on("invalid") 函数来检测提交表单时字段是否存在错误。如果出现错误，我会检查 input 和 textarea 是否其中之一为空、太长或太短，然后添加类 .error .

但是我想知道是否有任何方法可以简化我的代码，以便我不必在函数内运行额外的 if 语句。

$("form input, form textarea").on("invalid", function(event) {
  var input1 = document.getElementById('input1');
  var input2 = document.getElementById('input2');

  if (!input1.value || input1.value.length < 9 || input1.value.length > 69) {
    input1.classList.add('error');
    setTimeout(function() {
      input1.classList.remove('error');
    }, 500);
  }

  if (!input2.value || input2.value.length < 21 || input2.value.length > 899) {
    input2.classList.add('error');
    setTimeout(function() {
      input2.classList.remove('error');
    }, 500);
  }
});

.error {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="input1" minlength="8" maxlength="70" required>
  <textarea id="input2" maxlength="900" required></textarea>
  <input type="submit">
</form>

这是我正在寻找的示例，其中 x 是导致表单无效的字段(输入或文本区域)。:

$("form input, form textarea").on("invalid", function(event) {
   x.classList.add('error'); // variable x
   setTimeout(function() {
      x.classList.remove('error'); // variable x
   }, 500);  
}); 

我希望坚持使用 JavaScript，但我很高兴可能需要 jQuery。

Answer 1

这是一个可能的解决方案，它不能用 javascript 精确找到目标，而是使用 oninvalid html 中的事件监听器。

<input type="text" oninvalid="alert('You must fill out the form!');" required>


当表单返回invalid时，不会将其封装为表单事件，而是作为输入事件触发。当表单提交时特定输入不正确时，您可以让它在 JavaScript 中执行您喜欢的任何操作。