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

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完全找到目标，但在html中使用oninvalid事件监听器。

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

当表单返回无效时，而不是将其打包为表单事件，这将作为输入事件触发。在表单提交时，如果特定输入不正确，您可以在javascript中执行任何操作。

Answer 2

https://www.w3schools.com/jsref/event_onsubmit.asp事件提交可能是一个更好的选择。适用于所有浏览器

https://www.w3schools.com/jsref/event_oninvalid.asp相反，如果你使用oninvalid，你会发现Safari浏览器出现问题

<form onsubmit="validateForm()">
  Enter name: <input type="text">
  <input type="submit">
</form>

function validateForm() {
    //your code here
    if(validationfails){
        return false; //if arrives here means the form won't be submited
    }
}

Answer 3

我能够解决这个问题，特别感谢John Paul Penaloza的建议，在输入和textarea字段上使用oninvalid。我调用了一个函数，然后将类.error添加到输入字段 - 它与我的问题中的代码相同，但更简单：

function error(field) {
  field.classList.add('error');
  setTimeout(function() {
    field.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" oninvalid="error(this);" minlength="8" maxlength="70" required>
  <textarea id="input2" oninvalid="error(this);" maxlength="900" required></textarea>
  <input type="submit">
</form>

Answer 4

或者您可以以不同的方式思考并提供实时错误报告。

将id="myForm"添加到<form>元素中，然后在以下行中使用Js：

var allInputs = $('#myForm :input');
var inputsFuked = []

allInputs.each(function( index ) {
    console.log(allInputs[index]);
  $(allInputs[index]).change(function() {
    if (allInputs[index].checkValidity()) inputsFuked[index]=1;
    else inputsFuked[index]=0;
    });
});

这是工作JSfiddle与几个更多元素没有验证。

这将绑定每次输入更改时要执行的更改代码。这是一个示例，因此它只切换数组中的值。当你想要验证时，你只需检查哪些是错误的。如果您在数组中存储元素，则可以说明哪个元素。只需切换切换索引逻辑即可从数组中添加/删除。

但是使用这个装置你可以做得更好，你可以立即对无效元素做出反应。而是更改数组中的索引，您可以提示警报，显示错误，使元素变为红色。基本上他与用户进行交互的时刻，他从输入错误的元素聚焦，而不是在之后的某个时刻被动地做。