模态中的表单输入未按要求显示 [英] Form inputs in modal not showing as required

问题描述

我通读了一些相关文章，但并没有解决我自己的使表格字段按需显示的问题.也许问题出在外面，但我想分享一下，以防突出一个独特的情况.

I've read through some related articles without any luck of solving my own issue of getting form fields to appear as required. Perhaps the problem lies outside but I wanted to share in case it highlights a unique case.

这是一个可以在>此处完整查看的类分配，它允许用户添加新火车到时间表并更新Firebase数据库.为此，我使用了Bootstrap作为样式，并使用了一个模态弹出窗口，其中包含用于创建新火车的表格.一切正常，除了我无法使输入字段为必填字段或阻止提交"按钮.

This is a class assignment viewable in entirety here, it allows the user to add new trains to a schedule and update a Firebase DB. For this I used Bootstrap for the styles and also a modal pop-up that contains the form to create the new train. Everything works well, except that I cannot make the input fields required or prevent the 'submit' button.

我尝试将所有字段(在其各自的div内)包装在一个元素中，以及将它们分别包装在一个(如另一篇文章中所建议的)中，如下所示:

I've tried wrapping all the fields (within their individual divs) in a element, as well as wrapping them each in a (as was recommended in another post) like so:

<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问题，但它签出了.我的结构只是古怪吗?

I double-checked the Doctype for HTML5 issues, but it checks out. Is my structure just wack?

推荐答案

两件事.

1. 仅当使用submit事件侦听器时才触发required属性.看来您当前正在使用click.

1. The required attribute is only triggered when using the submit event listener. It looks like you are currently using click.

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

You are wrapping each input in it's own form tag. You should have a single form tag wrapping all of your inputs

示例:

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

这篇关于模态中的表单输入未按要求显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！