我有一个表单，其中包含多个部分，根据用户输入进行更改。某些字段在某些情况下是必需的，但在其他情况下则不需要，并且有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中出错，说
名称无效的表单控件=＆＃39; opt_other＆＃39;不可专注。
答案 0 :(得分：1)
您可以使用checkValidity函数在松散焦点时立即验证html5字段。这样它就不会验证隐藏的输入字段。
$('input').blur(function(event) {
event.target.checkValidity();
}).bind('invalid', function(event) {
setTimeout(function() { $(event.target).focus();}, 50);
});
答案 1 :(得分：1)
如何动态创建和销毁输入？
function fixOptsState() {
var v = document.getElementById('opts').value;
var otherEl = document.createElement('input');
otherEl.id="opt_other";
otherEl.setAttribute("required","");
if (v == "_other") {
document.getElementById('mainform').insertBefore(otherEl,document.querySelector('input[type=submit]'));
} else {
document.getElementById('opt_other')!=undefined?document.getElementById('mainform').removeChild(document.getElementById('opt_other')):void(0);
}
}
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());
});<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>
答案 2 :(得分：0)
Javascript确实使您能够在表单中的单个文本框中读取输入。只需通过在HTML5中为其提供唯一ID并在密钥更新时进行验证即可获取它。然后使用自己的参数和复杂性单独测试所有文本框所需的任何功能。
答案 3 :(得分：0)
这对我很有用，它是对 Sagar V 的改进。就我而言，您不需要将表单附加到正文中，这样更简洁。
function checkInput(el) {
// Clone Input
const clone = el.cloneNode(true);
// Create Temp From
const tempForm = document.createElement('form');
tempForm.appendChild(clone);
// Check Form
console.log('Validity = ' + tempForm.checkValidity());
}
const requiredInputs = querySelectorAll('input[required]');
// or whatever selector applies to your case
requiredInputs.forEach(el => {
el.addEventListener('change', () => { checkInput(el) });
});