javascript - 有没有办法检查单个 HTML5 输入元素的有效性？ (不是整个表格)

Question

我有一个表单，其中有多个部分会根据用户输入而变化。有些字段在某些情况下是必需的，但在其他情况下则不需要，并且有隐藏和显示适当字段的 JS。

我知道可以在表单对象上调用 checkValidity() 函数来检查 HTML5 验证是否通过(required、pattern 等属性 等)。

但我的表单太复杂了，表单的 checkValidity() 可能表明我的表单无效，但我有意向用户隐藏了该字段，例如在选择框中选择的选项。

对于单个字段是否有类似于 checkValidity() 的东西？还是有其他优雅的解决方案来解决这个问题？

编辑:这是一个演示问题 https://jsfiddle.net/w5ycvtsm/ 的工作示例

HTML:

<form id="mainform">

<select id="opts" name="opts">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="_other">Other</option>
</select>
<br/>
<input type="text" id="opt_other" name="opt_other" required>

<br/>
<input type="submit"/>

</form>

JS:

function fixOptsState() {
    var v = document.getElementById('opts').value;
  var otherEl = document.getElementById('opt_other');
  if (v == "_other") {
    otherEl.style.display = 'block';
  } else {
    otherEl.style.display = 'none';
  }
}

document.getElementById('opts').addEventListener('change', fixOptsState);
fixOptsState();

document.getElementById('mainform').addEventListener('submit', function(e) {
    e.preventDefault();
  var mainform = document.getElementById('mainform');
  console.log(mainform.checkValidity());
});

checkValidity() 实际上在 Chrome 中给出了一个错误，说

An invalid form control with name='opt_other' is not focusable.

Answer 1

您可以使用 checkValidity 函数在失去焦点后立即验证 html5 字段。这样它就不会验证隐藏的输入字段。

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});