表单未使用javascript进行验证？

我在右上角做了一个添加按钮（见第一个屏幕截图），当我点击它时，它会显示表单，其中有3个输入字段用于添加姓名、联系人号码、组名和最后提交按钮

---

我在表单的

input

字段中添加了

required

属性，但当我单击submit按钮提交空白详细信息时，该属性不起作用（参见第二个屏幕截图）

在app.js中：

我正在使用javascript动态添加HTML：

    <div class="row">
    <div class="col-lg-12" id="addNewContact">
     <form>
      <div class="form-group">
          <label for="name">Name:</label>
          <input type="text" class="form-control" id="nameInput">
      </div>
      <div class="form-group">
          <label for="number">Number:</label>
          <input type="text" class="form-control" id="numberInput">
      </div> 
      <div class="form-group">
          <label for="group">Group:</label>
          <input type="text" class="form-control" id="groupInput">
      </div> 
      <button type="button" class="btn btn-success" onclick="submitToDb()">Submit</button>
    </form>
    </div>
</div>

姓名：
编号：
组：
提交

镜头：

将显示空白字段，请参见屏幕截图：

---

在表单上使用

onsubmit

而不是单击

onclick

<form onsubmit="submitToDb()">

---

表单验证在处理

submit

事件时完成。如果您使用按钮单击来提交表单，则在默认提交发生之前就会发生这种情况。

将您的类型更改为button而不是submit，您可以将onclick绑定到提交整个表单且不会触发javascript的元素。@Programmer如果浏览器不知道它正在提交，我将尝试此示例@Programmer，为什么它会执行

所需的
检查？@Barmar我正在尝试此示例您确定您的输入值为空吗？如果删除html中的值属性会发生什么？据我所知，唯一的区别是函数的名称。我将
onclick（）
更改为
onsubmit（）
，现在它就像一个符咒一样工作。如果你喜欢我的问题，请投票表决。谢谢：）我
onsubmit（）
不工作了？当我在提交上单击它时，它不会在单击后提交它，它只是变成静态的为什么？JSFIDLE中没有
required
。当我用
onclick（）
单击提交按钮时，它至少显示空白字段，但用
onsubmit（）
它什么也不做？