Question

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

Answer 1

引用OP ：

“即使表单未经过验证，”提交仍然有效“

那是因为你的自定义.on('submit')处理程序超越了jQuery Validation插件的内置提交处理程序。

参考the documentation for the jQuery Validation plugin，

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

换句话说，任何.ajax()代码都在submitHandler回调函数内部，该函数仅在表单有效时触发。所以摆脱你的整个.on('submit')处理函数，而不是这样做......

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

$(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也会提交表单

1 个答案: