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

Question

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

这是一个可在此处完整查看的班级作业，它允许用户将新列车添加到时间表并更新 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>

我仔细检查了 HTML5 问题的 Doctype，但它检查出来了。我的结构很古怪吗？

Answer 1

两件事。

1. 仅当使用submit事件侦听器时，才会触发required属性。看起来您当前正在使用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
})

Answer 2

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

进行这两个更改修复了此问题的功能。感谢Tanner Eustice的帮助！