首页 文章

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

提问于
浏览
0

我使用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>

My Use Case:

我想用ids 'start_date''end_date' 验证两个输入字段 . 因为,它不是一种形式,因此无法获得'属性 .

I am thinking to use following:

  • 从带有 id='add_course' 的按钮中删除 data-dismiss="modal" aria-hidden="true" .

  • onclick='validate_course_fields();' 添加到上方按钮 .

  • 如果验证正常,则通过 $('#save_course_modal').hide() 隐藏模态;

感谢任何更好的解决方案 .

1 回答

  • 0

    首先,最好避免使用表格来对齐模态中的元素 .

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

相关问题