0

I am using twitter bootstrap modal to get 'Start' and 'End' date for some course.

<div id="save_course_modal" class="modal hide fade">
  <div class="modal_header_class">
    <h4>Start Course</h4>
  </div>
  <div class="modal-body">
    <label class='selector_modal_label'>Course</label>
    <table class="table">
      <thead>
        <tr>
          <th>
            <p>Start date: <input type="text" id="start_date" size="30" /></p>
          </th>
          <th>
            <p>End date: <input type="text" id="end_date" size="30" /></p>
          </th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="modal-footer modal_footer_class">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button id='add_course' class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Start</button>
  </div>
</div>

My Use Case:

I want to validate two input fields with ids 'start_date' and 'end_date'. Since, it is not a form and hence couldn't use 'required' attribute.

I am thinking to use following:

  1. Remove data-dismiss="modal" aria-hidden="true" from button with id='add_course'.
  2. Add onclick='validate_course_fields();' to above button.
  3. If validations are fine then hide modal through $('#save_course_modal').hide();

Any better solution is appreciated.

3
  • Is there something that you don't like about your solution? Does it work?
    – Trevor
    Dec 6, 2013 at 22:35
  • Trevor: It works but it looks like some kind of hack done around bootstrap modal to do my work. Dec 9, 2013 at 5:30
  • Your solution is legal :) when you add data-dismiss="modal" attribute anything in modal you say close modal when clicking this element. Nov 18, 2016 at 11:05

1 Answer 1

0

First it would be best to avoid using tables to align the elements in modal.

<div id="save_course_modal" class="modal hide fade">
    <div class="modal_header_class">
        <h4>Start Course</h4>
    </div>
    <div class="modal-body">
        <label class='selector_modal_label'>Course</label>
        <div class="form-group">
            <label class="control-label col-sm-2"> Start Date:</label>
            <div class="col-sm-10>
                <input type="text" id="start_date" class="form-control" size="30" /> 
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2"> End Date:</label>
            <div class="col-sm-10>
                <input type="text" id="end_date" class="form-control" size="30" />
            </div> 
        </div>  
    </div>
    <div class="modal-footer modal_footer_class">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button id='add_course' class="btn btn-primary">Start</button>
    </div> 
</div>

In your javascript code you should use the event hide of the Bootstrap that can be seen in http://getbootstrap.com/javascript/#modals

$("#add_course").click(function(e){
    e.preventDefault(); //remove the default button action

    //validation
    if(validate_form()){
        //When validation is OK

        //hide modal using event of the Bootstrap
        $("#save_course_modal").modal("hide");
    }
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.