Javascript 在确认模式和提交表单之前验证表单字段

我试图在表单提交之前使用引导模式作为确认对话框。但是，我想在显示模式之前首先验证我的表单。我该怎么做

这就是我迄今为止所尝试的：

<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显示模式”）。单击（函数（e）{
e、 预防默认值（）；
var id=$（this.attr（'id'）；
var modal_id=“dialog-example”+id；
$（“#”+modal_id）.modal（'show'）；
});
$（“.btn btn custom”）。单击（函数（e）{
var id=$（this.attr（'id'）；
var modal_id=“dialog-example”+id；
$（“#预订表单”）.submit（）；
$（“#”+modal_id）.modal（'hide'）；
});
});
姓名（*）：
中间名（*）：
姓氏（*）：
电邮地址（*）：
地址:
电话号码：
手机号码：
问题是，当您单击模态按钮时提交表单，因为它与模态锚具有相同的类

$(".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>

像这样，提交操作仅由模式锚触发。如果使用类进行css样式设计，使用相同的类进行javascript选择器，则必须小心。更好的方法是给这些按钮（如果只使用一次）一个id，这样javascript就可以更快地访问它。并仅为css保留.btn、.btn自定义。
尝试先添加返回false；在函数中，您可以将显示模式代码放入验证的成功回调中。@gulty您好，您能帮我将其放入代码中吗？
$(".btn-show-modal").click(function(e){ ...    
$(".btn-submit").click(function(e){}