Question

我使用twitter bootstrap模式获取某些课程的“开始”和“结束”日期。

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

我的使用案例

我想验证两个带有ids 'start_date'和'end_date'的输入字段。因为，它不是表格，因此不能使用'required'属性。

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

从中删除 data-dismiss =“modal”aria-hidden =“true” 按钮 id ='add_course'。
将 onclick ='validate_course_fields（）;'添加到上方按钮。
如果验证正常，则通过 $（'＃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代码中，您应该使用可以在http://getbootstrap.com/javascript/#modals

中看到的Bootstrap事件隐藏

$("#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");
    }
})

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

1 个答案: