如果按下提交按钮以检查验证表单，则输入字段被阻止答案

【问题标题】：Input field blocked if Submit button pressed to check validation form如果按下提交按钮以检查验证表单，则输入字段被阻止
【发布时间】：2019-07-27 07:46:58
【问题描述】：

我尝试编写以下代码：

用户在表单中输入他的名字和名字。
当他单击提交按钮时，表单会验证值
点击提交按钮后会打开一个模式

但我遇到了这个问题：

如果用户将字段留空，然后单击提交按钮，他将无法在字段中输入任何内容。表格被屏蔽了，他什么都做不了。

这是一段 Javascript 代码：

validateForm = () => {
  window.addEventListener('load', () => {
    let validation = Array.prototype.filter.call(this.needsvalidation, form => {
      this.send.addEventListener('click', event => {
        if(form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
}

您可以在此处查看该页面： http://p4547.phpnet.org/velos/form.html

请注意：我使用了“点击”事件而不是提交事件，因为我不会将任何数据发送到任何地方。当我点击 Book 按钮时，我只会启动一个模式引导程序。

你有什么想法吗？

谢谢

【问题讨论】：

尝试添加event.preventDefault()，不管form.checkValidity()是否为假。
@JossClassey 你的意思是再次添加 event.preventDefault();就在 form.classList.add('was-validated'); 之前?
是的，只是看看它的作用:)
@JossClassey 它不起作用。我也试着把 event.preventDefault();在 If 之前也是如此，但没有任何变化。结果是一样的。
好的，排除一件事！如果您可以将您的代码放在codesandbox.io 中，这样我们就可以使用它了。

标签： javascript twitter-bootstrap bootstrap-modal es6-class

【解决方案1】：

我解决了我的问题：

在我的 Javascript 代码中，我有这行： this.modal.style.display = "块";

当提交按钮被点击时，块显示阻止了填写字段的可能性。

【讨论】：