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

【问题标题】：Ajax submits the form even if its not validated with bootstrap validationAjax 提交表单，即使它没有通过引导验证进行验证
【发布时间】：2014-01-02 23:03:21
【问题描述】：

我有一个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();
            });
        }
    });  
});

【问题讨论】：

您的.validate() 调用必须不带任何换行符吗？

标签： ajax forms twitter-bootstrap jquery-validate

【解决方案1】：

引用OP：

“即使表单未经验证，提交也有效”

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

参考the documentation for the jQuery Validation plugin，

submitHandler（默认：原生表单提交）
类型：Function()
表单提交时处理实际提交的回调已验证。获取 form 作为唯一参数。 替换默认值提交。 通过 Ajax 提交表单的正确位置验证。

换句话说，任何.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 变量，因为您已经在.ajax() 中声明了url。还不如保存一行并对post_data 做同样的事情。

【讨论】：