Javascript 有没有办法检查单个HTML5输入元素的有效性？（不是整个表格）

我有一个表单，它有多个部分，根据用户输入进行更改。某些字段在某些情况下是必需的，但在其他情况下不是必需的，并且存在隐藏和显示适当字段的JS

我知道

checkValidity（）

函数可以在表单对象上调用，以检查HTML5验证是否通过（属性如

required

，

pattern

等）

但是我的表单太复杂了，因此该表单的

checkValidity（）

可能表示我的表单无效，但我已故意向用户隐藏该字段，例如，基于在选择框中选择的选项

对于单个字段是否有类似于

checkValidity（）

的内容？或者这个问题还有其他优雅的解决方案吗

编辑：这里有一个工作示例演示了这个问题

HTML:

checkValidity（）

实际上在Chrome中给出了一个错误，即

名为='opt_other'的无效表单控件不可聚焦

---

Javascript确实允许您在表单中的单个文本框中读取输入。只要在HTML5中给它一个唯一的ID并在密钥更新时验证它就可以了。然后用它自己的参数和复杂度来分别测试所有文本框所需的任何函数。

一旦html5字段失去焦点，就可以使用checkValidity函数来验证它。这样它就不会验证隐藏的输入字段

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

---

动态创建和销毁输入怎么样

函数fixoptstate（）{
var v=document.getElementById（'opts'）.value；
var otherEl=document.createElement（'input'）；
otherEl.id=“opt_other”；
otherEl.setAttribute（“必需的”、“必需的”）；
如果（v==“_其他”）{
document.getElementById（'mainform'）.insertBefore（otherEl，document.querySelector（'input[type=submit]）；
}否则{
document.getElementById（'opt_other'）！=未定义？document.getElementById（'mainform'）。removeChild（document.getElementById（'opt_other'））：void（0）；
}
}
document.getElementById（'opts'）。addEventListener（'change'，FixOptState）；
FixOptState（）；
document.getElementById（'mainform'）。addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
var mainform=document.getElementById（'mainform'）；
log（mainform.checkValidity（））；
});

A.
B
C
其他




这对我来说非常有效，它是对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) });
});

@萨加夫码added@BradPeabody回答补充道。
$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

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) });
});