有没有办法检查单个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中出错，说

  

名称无效的表单控件=＆＃39; opt_other＆＃39;不可专注。

Answer 1

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

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

Answer 2

如何动态创建和销毁输入？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Javascript确实使您能够在表单中的单个文本框中读取输入。只需通过在HTML5中为其提供唯一ID并在密钥更新时进行验证即可获取它。然后使用自己的参数和复杂性单独测试所有文本框所需的任何功能。

Answer 4

这对我很有用，它是对 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) });
});