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

Posted 2023-05-07

【中文标题】单击按钮验证引导模式字段

【英文标题】：Validate bootstrap modal fields on click of button

【发布时间】：2013-12-23 22:05:55

【问题描述】：

我正在使用 twitter 引导模式来获取某些课程的“开始”和“结束”日期。

<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' 的两个输入字段。 因为，它不是一个表单，因此不能使用 'required' 属性。

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

删除 data-dismiss="modal" aria-hidden="true" id='add_course' 按钮。 将 onclick='validate_course_fields();' 添加到上面的按钮。 如果验证正常，则通过 $('#save_course_modal').hide(); 隐藏模式

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

【问题讨论】：

您的解决方案有什么不满意的地方吗？有用吗？

Trevor：它可以工作，但它看起来像是围绕引导模式完成的某种 hack 来完成我的工作。

您的解决方案是合法的 :) 当您在模态中添加 data-dismiss="modal" 属性时，单击此元素时会说关闭模态。

【参考方案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");
    
)