在 javascript 中通过 DOM 获取所需的表单元素

【问题标题】：get required form elements via DOM in javascript在 javascript 中通过 DOM 获取所需的表单元素
【发布时间】：2016-05-25 15:10:06
【问题描述】：

为了检查必填字段和提醒用户缺少必填字段的自定义方法，我试图在表单中获取一组元素，并且一直在寻找但没有找到好的方法。

是否有一些变化

document.getElementById(form).elements;

这将返回一个数组的所有必需元素，或者一种测试给定元素是否需要的方法......类似于任一

var my_elements = document.getElementById(form).required_elements;

或

var my_elements = document.getElementById(form).elements;
for (var this_element in my_elements){
    if (this_element.attributes["required"] == "false"){
        my_elements.splice(this_element, 1);
    }
}

【问题讨论】：

对于浏览器内置警报的必填字段，我认为。验证将在提交按钮单击时自动触发。

标签： javascript forms required

【解决方案1】：

试试querySelectorAll 和attribute selector：

document.getElementById(form).querySelectorAll("[required]")

var requiredElements = document.getElementById("form").querySelectorAll("[required]"),
  c = document.getElementById("check"),
  o = document.getElementById("output");

c.addEventListener("click", function() {
  var s = "";
  for (var i = 0; i < requiredElements.length; i++) {
    var e = requiredElements[i];
    s += e.id + ": " + (e.value.length ? "Filled" : "Not Filled") + "<br>";
  }
  o.innerHTML = s;
});

[required] {
  outline: 1px solid red;
}

<form id="form">
  <input required type="text" id="text1" />
  <input required type="text" id="text2" />
  <input type="text" id="text3" />
  <input type="text" id="text4" />
  <input required type="text" id="text5" />
</form>

<br>

<button id="check">Check</button>

<br>

<div id="output">
  Required inputs
</div>

【讨论】：