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

我有一个带有 form 的 bootstrap，它工作正常。和 jQuery 验证工作正常。说到ajax提交代码，有问题。即使未验证 form 也提交作品。

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

如何停止操作并要求验证？

这是 form 标记:

<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>

这是 jQuery 验证:

$('form').validate({
    rules: {
        firstname: {minlength: 2, maxlength: 40, required: true},
        lastname: {minlength: 2, maxlength: 40, required: true},
        email: {email: true, required: true},
        country: {required: true},
        mobile: {minlength: 2, maxlength: 40, required: true},
        address: {minlength: 3, required: true}
    },
});

这部分是ajax()提交:

$('#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();
            });
        }
    });
});

最佳答案

引用 OP :



那是因为您的自定义 .on('submit') 处理程序覆盖了 jQuery 验证插件的内置提交处理程序。

引用 the documentation for the jQuery Validation plugin ，



换句话说，任何 .ajax() 代码都在 submitHandler 回调函数内部，该函数仅在表单有效时触发。因此，摆脱整个 .on('submit') 处理程序函数并改为执行此操作...

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

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

看起来您不需要 post_url 变量，因为您已经在 url 中声明了 .ajax() 。也可以保存一行并对 post_data 做同样的事情。

关于Ajax 提交表单，即使它没有通过引导验证进行验证，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20893573/