Form inputs in modal not showing as required

Hyde

New Member
#1
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:
Mã:
<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?
 

Admin

Administrator
Thành viên BQT
#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:

Mã:
<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
})
 
OP
OP
H

Hyde

New Member
#3
Thanks . . . I clipped this out accidentally, but perhaps something is wrong with my submit button too? I placed it in the modal's footer: <div class="modal-footer"> <button class="btn btn-primary" id="submit" type="submit" value="submit">Submit</button> </div>
 

Admin

Administrator
Thành viên BQT
#4
Ah, your right! The submit button needs to be inside the form tag as well. I updated my example
 
Top