Ajax提交表单，即使表单未通过引导验证进行验证

我有一个

表单

，带有

引导

，运行良好。jQuery验证工作正常。当涉及到

ajax

submitcode时，出现了一些问题。即使未验证

表单

，提交仍有效

假设我将一个字段留空并按下submit，它会突出显示空字段上的错误，但ajax仍然提交

表单

如何停止操作并请求验证

这是

表单

标记：

<form id="booking" method="post" class="form" action="" >
    ....some input fields here....
    <button type="submit" id="submit" class="btn btn-large btn-block btn-primary">Book Now</button>
</form>

这部分是

ajax（）

submit：

$('#booking').on('submit', function(e) {
    e.preventDefault();
    var form = $(this); 
    var post_url = form.attr('action'); 
    var post_data = form.serialize();
    $('#loader', form).html('<img src="http://www.fethiye-tours.com/assets/images/lightbox/loading.gif" /> Please Wait...');
    $.ajax({
        type: 'POST',
        url: 'http://www.fethiye-tours.com/book.php',
        data: post_data,
        success: function(msg) {
            $(form).fadeOut(500, function(){
                form.html(msg).fadeIn();
            });
        }
    });  
});

$（“#预订”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
变量形式=$（此）；
var post_url=form.attr（'action'）；
var post_data=form.serialize（）；
$（'loader'，form）.html（'Please Wait…'）；
$.ajax({
键入：“POST”，
网址：'http://www.fethiye-tours.com/book.php',
数据：post_数据，
成功：功能（msg）{
$（形式）.fadeOut（500，函数（）{
html（msg.fadeIn（）；
});
}
});  
});

引用OP：

“即使表单未经验证也可以提交”

这是因为您的自定义（'submit'）处理程序凌驾于jQuery验证插件的内置提交处理程序之上

指

submitHandler（默认值：原生表单提交）
键入：Function（）
回调，用于在表单提交时处理实际提交 这是有效的。获取

表单

作为唯一参数。替换默认值 提交提交表单后通过Ajax提交表单的正确位置 已验证

换句话说，任何

.ajax（）

代码都位于

submitHandler

回调函数内部，该函数仅在表单有效时激发。所以，去掉（'submit'）处理函数上的整个

.on（'submit'）

处理函数，改为这样做

（顺便说一句：正确缩进/格式化的代码更适合每个人阅读和排除故障）

$（文档）.ready（函数（）{
$（'#booking'）.validate（{//您的
.validate（）
调用必须在没有任何换行符的情况下写入吗？
$('#booking').on('submit', function(e) {
    e.preventDefault();
    var form = $(this); 
    var post_url = form.attr('action'); 
    var post_data = form.serialize();
    $('#loader', form).html('<img src="http://www.fethiye-tours.com/assets/images/lightbox/loading.gif" /> Please Wait...');
    $.ajax({
        type: 'POST',
        url: 'http://www.fethiye-tours.com/book.php',
        data: post_data,
        success: function(msg) {
            $(form).fadeOut(500, function(){
                form.html(msg).fadeIn();
            });
        }
    });  
});

$(document).ready(function() {

    $('#booking').validate({  // <- attach '.validate()' to your form
        // any rules, options, and callbacks,
        rules: {
            firstname: {
                // minlength: 2,
                // maxlength: 40,
                rangelength: [2,40], // <- combines minlength and maxlength rules
                required: true
            },
            //  more rules,
        },
        submitHandler: function(form) { // <- only fires when form is valid
            $('#loader', $(form)).html('<img src="http://www.fethiye-tours.com/assets/images/lightbox/loading.gif" /> Please Wait...');
            $.ajax({
                type: 'POST',
                url: 'http://www.fethiye-tours.com/book.php',
                data: $(form).serialize(),
                success: function(msg) {
                    $(form).fadeOut(500, function(){
                        $(form).html(msg).fadeIn();
                    });
                }
            });            // <- end '.ajax()'
            return false;  // <- block default form action
        }                  // <- end 'submitHandler' callback
    });                    // <- end '.validate()'

});                        // <- end DOM ready handler