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 remended 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?

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 remended 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?

• javascript
• html
• forms
• bootstrap-modal
• required-field

• only one form tag would suffice, and it should be written like this: required="required" or just required to make a form element required. – ThS Commented Sep 26, 2018 at 21:32
• Thanks, that did seem excessive. I had in earlier instances finished my input tag with the plain required /> but it behaved the same. – Kevin H. Commented Sep 26, 2018 at 21:35

2 Answers 2

Two things.

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

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

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!