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>

当表单返回invalid时，而不是将其打包为表单事件，这将作为输入事件触发。当表单提交时，如果特定输入不正确，您可以在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字段上使用df_outliers: code year unit 6 48300560000198 2015 reg ...。我调用了一个函数，然后将类oninvalid添加到输入字段 - 它与我的问题中的代码相同，但更简单：

＆＃13;

.error

＆＃13;

function error(field) {
  field.classList.add('error');
  setTimeout(function() {
    field.classList.remove('error');
  }, 500);
}

＆＃13;

.error {
  border: 1px solid red;
}

＆＃13;

Answer 4

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

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

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包含更多未经验证的元素。

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

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

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

4 个答案: