[英]Validate bootstrap modal fields on click of button
I am using twitter bootstrap modal to get 'Start' and 'End' date for some course. 我正在使用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>
My Use Case: 我的用例:
I want to validate two input fields with ids 'start_date' and 'end_date' . 我想验证两个ID为'start_date'和'end_date'的输入字段。 Since, it is not a form and hence couldn't use 'required' attribute.
由于这不是表格,因此无法使用“必需”属性。
I am thinking to use following: 我正在考虑使用以下内容:
Any better solution is appreciated. 任何更好的解决方案表示赞赏。
First it would be best to avoid using tables to align the elements in 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>
<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>
In your javascript code you should use the event hide of the Bootstrap that can be seen in http://getbootstrap.com/javascript/#modals 在您的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");
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.