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

Question

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

这是一项 class 任务，可完整查看 here，它允许用户将新火车添加到时刻表并更新 Firebase 数据库。为此，我使用 Bootstrap 作为样式，还使用了一个包含用于创建新火车的表单的模式弹出窗口。一切正常，除了我无法输入必填字段或阻止 'submit' 按钮。

我试过将所有字段（在它们各自的 div 中）包装在一个元素中，并将它们分别包装在一个元素中（如另一个 post 中所推荐的那样），如下所示：

<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

两件事。

required 属性仅在使用 submit 事件侦听器时触发。看起来您目前正在使用 click.
您将每个 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
})

Answer 2

关于 required 属性不起作用的错误是在我处理“提交”按钮时。 1. 它位于它所属的 <form> 标签之外，并且 2. 我的 Javascript 也在监听 on("click" . . . 而不是 on("submit" . . .

进行这 2 项更改解决了此问题的功能。感谢 Tanner Eustice 的帮助！

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

Form inputs in modal not showing as required

html

javascript

forms

required-field

bootstrap-modal