在使用 javascript 提交之前检查是否设置了所有必需的输入答案

【问题标题】：Check if all the required inputs are set before submit with javascript在使用 javascript 提交之前检查是否设置了所有必需的输入
【发布时间】：2021-11-17 07:10:00
【问题描述】：

我想知道是否有办法在使用纯 Javascript 以编程方式提交表单之前强制检查表单上所需的输入：

<form method="post" action="myController.php" id="myForm">
   <input type="text" id="input1" required>
   <input type="text" id="input2" required>
   <input type="text" id="input3" required>
   <input type="submit" onClick="return checkForm(event)" value="Save">
</form>

我的 Javascript 文件：

function checkForm(e) {
   e.preventDefault();
   // Some other stuff
   /*Prevalidate required inputs here*/
   document.getElementById('myForm').submit();
}

我想知道是否有类似的东西：

if(document.getElementById('myForm').valid()) {
   document.getElementById('myForm').submit()
}

在提交表单之前检查所需的输入，而无需直接通过代码一一验证。

【问题讨论】：

您不需要为此使用 JavaScript。普通表单提交检查required 属性。

标签： javascript html forms

【解决方案1】：

有form.onSubmit事件

但如果您使用的是 HTML 5，则可以将input.pattern 与正则表达式一起使用；如果输入未通过检查，则提交将被阻止，并且input 元素（在许多浏览器上）周围会出现红色边框。

【讨论】：

为什么required 也不起作用？
你认为我认为它有什么作用？
没有关于匹配模式的问题，它只需要非空。
我们可以使用模式来检查用户是否只输入了被认为是空输入的空格？
@TAHERElMehdi 是的，比如\s*

【解决方案2】：

如果您需要在提交时进行自定义操作，您可以通过form.reportValidity() 触发验证并返回一个布尔值，指示所有输入是否满足其约束。

如果您想在 UI 中进行标记，您还可以侦听 invalid 事件，这些事件将在验证期间为每个无效输入触发：

function onInvalid (e) {
  e.target.classList.add('invalid');
}

const form = document.querySelector('form');

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', onInvalid);
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  const valid = form.reportValidity();
})

.invalid {
  border: 4px solid red;
}

<form>
  <input name="test1" required />
  <input name="test2" required />
  <input name="test3" required />
  <input type="submit" />
</form>

【讨论】：

【解决方案3】：

利用表单属性onsumbit 提交表单，如果从函数checkForm返回的值，如果所有字段都被填充并且不是动态地为空，则返回布尔值。

function checkForm(e) {
    let valid = true;
    inputs = document.querySelectorAll('[type="text"]')
    for(input of inputs){
      if(input.value.trim()==''){
        valid = false;
        break;
      }
    }
    return valid;
}

<form method="post" id="myForm" action='test.php' onsubmit="return checkForm(this)">
   <input type="text" id="input1" required>
   <input type="text" id="input2" required>
   <input type="text" id="input3" required>
   <input type="submit" value="Save">
</form>

【讨论】：