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.

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.

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>

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

回答1:

Two things.

The required attribute is only triggered when using the submit event listener. It looks like you are currently using click.
You are wrapping each input in it's own form tag. You should have a single form tag wrapping all of your inputs

Example:

<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:

My error with regard to the required attribute not working was in my handling of the Submit button. 1. it lay outside of the <form> tags it belonged in, and 2. my Javascript was also listening for on("click" . . . instead of on("submit" . . .

Making those 2 changes fixed the functionality for this concern. Thanks to Tanner Eustice for the help!

来源：https://stackoverflow.com/questions/52526176/form-inputs-in-modal-not-showing-as-required

标签

javascript

html

forms

bootstrap-modal

required-field