Validating data in bootstrap modal using JQuery not working

Question

I have been stuck on this issue since a week. I am not able to validate bootstrap modal using jQuery validator function. I have searched lots of stuff, also I have used exactly the same method as mentioned in here: How to correctly validate a modal form . I have been using django framework. Here is my HTML code:

<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <form class="form-horizontal" id="myForm" role="form" action="{% url 'apply:add' %}" method="POST">
                            {% csrf_token %}
                        <div class="modal-header">
                            <button type="button" class="close" 
                               data-dismiss="modal">
                                   <span aria-hidden="true">&times;</span>
                                   <span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                Apply Leave
                            </h4>
                        </div>

                        <!-- Modal Body -->
                        <div class="modal-body">
                                    <div class="form-group">
                                        <label  class="control-label col-sm-3" for="e_id">Employee-Id</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" id="e_id" name="e_id" class="required">
                                                {% for entry in emp_data %}
                                                    <option value="{{ entry.emp_id }}">{{ entry.emp_id }} - {{ entry.emp_name}} </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <style>
                                    .datepicker {
                                      z-index: 1600 !important;
                                      border-color: black;

                                    }
                                    </style>

                                    <div class="form-group">
                                        <label  class=" control-label col-sm-3" for="s_dt">Start Date</label>
                                            <div class="col-sm-9" >
                                            <input type='text' class="form-control" id="s_dt" placeholder="Start Date" name="s_dt"/>
                                            </div>
                                    </div>


                                    <div class="form-group">
                                        <label  class="control-label col-sm-3" for="e_dt">End Date</label>
                                            <div class="col-sm-9" >
                                            <input type='text' class="form-control" id="e_dt" placeholder="End Date" name="e_dt" require/>
                                            </div>
                                    </div>

                                  <p class="col-sm-9 col-sm-offset-3" > Enter Start Date = End Date if leave is applied for a single day </br></p>

                                    <div class="form-group">
                                        <label  class="col-sm-3 control-label" for="l_type">Leave Type</label>
                                        <div class="col-sm-9">
                                                <select class="form-control" id="l_type" name="l_type">
                                                    <option value="S">Sick Leave</option>
                                                    <option value="V">Vacation Leave</option>
                                                    <option value="M">Maternity Leave</option>
                                                    <option value="P">Paternity Leave</option>
                                                    <option value="C">Casual Leave</option>
                                                </select>

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="desc">Description</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control" id="desc" rows="3"></textarea>
                                        </div>
                                    </div>

                                  <!-- Modal Footer -->
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default"
                                                data-dismiss="modal">
                                                    Close
                                        </button>
                                        <button type="submit" class="btn btn-primary" name="save" id="save" value="Save changes" data-dismiss="modal">
                                            Save changes
                                        </button>
                                    </div>
                            </form>      
                        </div>  
                    </div>
                </div>
            </div>

Here is my javascript:

  $(function() {
  $("#myForm").validate({
        rules: {
          s_dt: "required",
          e_dt: "required"

        },
       messages: {
          s_dt: "Please provide a date",
          e_dt: "Please provide a date"
        }
      });
    });

Thanks in advance..