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

Question

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

这是一个完整可见的类作业 here ，它允许用户将新火车添加到时间表中并更新 Firebase 数据库。为此，我将 Bootstrap 用于样式以及包含用于创建新火车的表单的模式弹出窗口。一切正常，除了我无法将输入字段设置为必填项或阻止“提交”按钮。

我试过将所有字段(在它们各自的 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 问题，但它检查出来了。我的结构很奇怪吗？

Answer 1

两件事。

1. required 属性仅在使用 submit 事件监听器时触发。您目前似乎正在使用 click。

2. 您将每个 input 包装在它自己的表单标签中。你应该有一个单一的表单标签来包装你的所有输入

示例:

<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
})