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

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

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

Answer 2

两件事。

仅在使用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
})

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

2 个答案: