[英]Validate form fields before confim modal and submit form
我正在嘗試使用Bootstrap Modal作為表單提交之前的確認對話框。 但是,我想在顯示模式之前先驗證我的表單。 我怎樣才能做到這一點?
到目前為止,這是我嘗試過的:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('show');
});
$(".btn btn-custom").click(function(e) {
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#reservationForm").submit();
$("#"+modal_id).modal('hide');
});
});
</script>
<form class="form" method="POST" action="unit-reservation.php" id="reservationForm">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label"><b>Firstname (*):</b></label>
<div class="controls">
<input type="text" name="customerfname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Middlename (*):</b></label>
<div class="controls">
<input type="text" name="customermname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Lastname (*):</b></label>
<div class="controls">
<input type="text" name="customerlname" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Email Address (*):</b></label>
<div class="controls">
<input type="email" name="customeremailaddress" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Address:</b></label>
<div class="controls">
<input type="text" name="customeraddress" required />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Telephone Number:</b></label>
<div class="controls">
<input type="tel" name="customertelnumber" />
</div>
</div>
<div class="control-group">
<label class="control-label"><b>Mobile Number:</b></label>
<div class="controls">
<input type="number" step="any" min="0" name="customermobilenumber" required /
</div>
</div>
</div>
<input type="hidden" value="<?php echo $user; ?>" name="user_id">
<button id="<?php echo $code; ?>" class="btn btn-custom btn-show-modal" data-toggle="modal">Reserve Now</button>
</form>
<div class="modal hide fade" id="dialog-example_<?php echo $code; ?>">
<div class="modal-header">
<h5>Confirm Reservation</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to reserve unit: <?php echo $code; ?>?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">No</a>
<a href="" class="btn btn-custom" id="<?php echo $code ;?>">Yes</a>
</div>
</div>
問題在於您在單擊模式按鈕時提交了表單,因為它與模式錨具有相同的類。
$(".btn-show-modal").click(function(e){ ...
$(".btn btn-custom").click(function(e) {...
您必須為提交的模式錨添加另一個類。
<a href="" class="btn btn-custom btn-submit" id="<?php echo $code ;?>">Yes</a>
並將其稱為您的提交點擊處理程序:
$(".btn-show-modal").click(function(e){ ...
$(".btn-submit").click(function(e){}
這樣,submit操作僅由您的模式錨觸發。 如果您將類用於CSS樣式,而將相同的類用於javascript選擇器,則必須小心。 更好的方法是為這些按鈕(如果僅使用一次)提供一個ID,以便javascript可以更快地訪問它。 並僅將.btn,.btn-custom保留為css。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.