Javascript 模态中的表单输入未按要求显示

我已经阅读了一些相关文章，但没有解决我自己的问题，即让表单字段按要求显示。也许问题出在外面，但我想与大家分享一下，以防它突出了一个独特的案例

这是一个可整体查看的类分配，它允许用户将新列车添加到计划并更新Firebase DB。为此，我对样式使用了引导，还使用了一个模式弹出窗口，其中包含创建新火车的表单。一切都很好，除了我无法使输入字段成为必需字段或阻止“提交”按钮

我尝试过将各个div中的所有字段包装到一个元素中，也尝试过将每个字段包装到一个元素中，正如另一篇文章所建议的那样：

<div class="modal-body">
  <div class="panel panel-info">
    <div class="panel-body">
      <div class="form-group">
        <form>
          <label for="train_name">Train Name:</label> <input class="form-control" id="train_name" required="" type="text">
        </form>
      </div>
      <div class="form-group">
        <form>
          <label for="origin">Origin:</label> <input class="form-control" id="origin" required="" type="text">
        </form>
      </div>
      <div class="form-group">
        <form>
          <label for="destination">Destination:</label> <input class="form-control" id="destination" required="" type="text">
        </form>
      </div>
    </div>
  </div>
<div class="modal-footer">
  <button class="btn btn-primary" id="submit" type="submit" value="submit">Submit</button>
</div>
</div>

我仔细检查了Doctype是否存在HTML5问题，但它检查出来了。我的结构是不是很古怪

两件事

仅当使用提交事件侦听器时才会触发必需的属性。看起来您当前正在使用“单击”

您正在将每个输入包装到它自己的表单标记中。您应该有一个表单标记来包装所有输入

例如：

<div class="panel-body">
  <form id="my-form">
    <div class="form-group">
     <label for="train_name">Train Name:</label> <input class="form-control" id="train_name" required="" type="text">
    </div>
    <div class="form-group">
      <label for="origin">Origin:</label> <input class="form-control" id="origin" required="" type="text">
    </div>
    <div class="form-group">
      <label for="destination">Destination:</label> <input class="form-control" id="destination" required="" type="text">
    </div>
    <button class="btn btn-primary" id="submit" type="submit">Submit</button>
  </form>
</div>


$("#my-form").on("submit", function (e) {
  //do your form submission logic here
})

两件事

仅当使用提交事件侦听器时才会触发必需的属性。看起来您当前正在使用“单击”

您正在将每个输入包装到它自己的表单标记中。您应该有一个表单标记来包装所有输入

例如：

<div class="panel-body">
  <form id="my-form">
    <div class="form-group">
     <label for="train_name">Train Name:</label> <input class="form-control" id="train_name" required="" type="text">
    </div>
    <div class="form-group">
      <label for="origin">Origin:</label> <input class="form-control" id="origin" required="" type="text">
    </div>
    <div class="form-group">
      <label for="destination">Destination:</label> <input class="form-control" id="destination" required="" type="text">
    </div>
    <button class="btn btn-primary" id="submit" type="submit">Submit</button>
  </form>
</div>


$("#my-form").on("submit", function (e) {
  //do your form submission logic here
})

---

关于所需属性不起作用的错误是在处理Submit按钮时出现的。 1.它躺在它所属的标签外面 2.我的Javascript也在监听onclick。而不是提交

---

进行这两项更改修复了此问题的功能。谢谢你的帮助

关于所需属性不起作用的错误是在处理提交按钮时发生的。 1.它躺在它所属的标签外面 2.我的Javascript也在监听onclick。而不是提交

---

进行这两项更改修复了此问题的功能。谢谢你的帮助

只有一个表单标签就足够了，它应该这样写：required=required，或者只是required，以使表单元素成为required。谢谢，这看起来太过分了。在以前的例子中，我用简单的required/>完成了我的输入标记，但它的行为是一样的。只有一个表单标记就足够了，它应该这样写：required=required，或者只是required，以使表单元素成为required。谢谢，这看起来太过分了。在以前的例子中，我用简单的required/>完成了我的输入标记，但它的行为是相同的。OP甚至没有标记，您根据它给出了答案？谢谢。我不小心把它剪掉了，但我的提交按钮可能也有问题？我把它放在模态的页脚：提交@KevinHyde啊，你的权利！提交按钮也需要位于表单标签内。我更新了我的例子，OP甚至没有标记，而你给出了基于它的答案？谢谢。我不小心把它剪掉了，但我的提交按钮可能也有问题？我把它放在模态的页脚：提交@KevinHyde啊，你的权利！提交按钮也需要位于表单标签内。我更新了我的示例