我有一个表单，该表单有多个部分，这些部分会根据用户输入进行更改。在某些情况下某些字段是必需的，而在其他情况下则不需要，并且有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中显示错误，说名称='opt_other'的无效表单控件不可聚焦。
最佳答案
一旦失去焦点，您就可以使用checkValidity函数验证html5字段。这样就不会验证隐藏的输入字段。
$('input').blur(function(event) {
event.target.checkValidity();
}).bind('invalid', function(event) {
setTimeout(function() { $(event.target).focus();}, 50);
});