单击按钮验证引导程序模式字段

Question

我正在使用twitter bootstrap 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>
    <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>

我的用例：

我想验证两个ID为'start_date'和'end_date'的输入字段。 由于这不是表格，因此无法使用“必需”属性。

我正在考虑使用以下内容：

1. 从id ='add_course'的按钮中删除data-dismiss =“ modal” aria-hidden =“ true” 。
2. 添加onclick ='validate_course_fields（）;' 到上方按钮。
3. 如果验证通过，则通过$（'＃save_course_modal'）。hide（）隐藏模式。

任何更好的解决方案表示赞赏。

Answer 1

首先，最好避免使用表格将模式中的元素对齐。

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

在您的javascript代码中，您应该使用Bootstrap的事件隐藏，可以在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");
    }
})