使用Required属性对所有字段进行Javascript验证

Question

我已经搜索了这个问题的答案,但在任何地方找不到它.

我有一个具有HTML'required'属性的表单,它可以很好地突出显示需要在提交之前填写的字段...或者可以,但我的表单用螺栓固定到的系统(我有无法控制)几秒钟后无论如何都会提交表格.它依赖于Javascript的提交.因此,我想编写一个Javascript脚本来检查所有属性的所有字段.目前我有一个脚本,指定我想要强制的字段,但如果它可以查找属性,那将是辉煌的.

Answer 1

如果使用输入[type = submit],则不需要任何JavaScript

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="submit" name="submit" value="Submit" />  
</form>

工作jsBin

但如果输入[type = button]用于提交表单,请使用下面的代码段

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="button" name="button" value="Submit" />  
</form>

window.onload = function () {
  var form = document.getElementById('theForm');
  form.button.onclick = function (){
    for(var i=0; i < form.elements.length; i++){
      if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
        alert('There are some required fields!');
        return false;
      }
    }
    form.submit();
  }; 
};

Wotking jsBin

Answer 2

许多年后，这里有一个使用更现代的 Javascript 的解决方案：

for (const el of document.getElementById('form').querySelectorAll("[required]")) {
  if (!el.reportValidity()) {
    return;
  }
}

请参阅 Vlad 的评论，获取约束验证 API 的链接（感谢 Vlad，这很有帮助！）

Answer 3

我参加聚会迟到了，但这对我有用。

<input type="firstname" value="" required />

document.getElementById('theForm').reportValidity();
if (check) {
    //success code here
    return true;
}

感谢 Vlad 和 ale 用他们之前的答案为我指明了正确的方向。这是他们方法的简化版本。