将 Bootstrap validator.js 与 Jquery ajax 表单发布一起使用答案

【问题标题】：Using Bootstrap validator.js with Jquery ajax form post将 Bootstrap validator.js 与 Jquery ajax 表单发布一起使用
【发布时间】：2015-05-25 15:04:37
【问题描述】：

我正在尝试使用此验证器 https://github.com/1000hz/bootstrap-validator 进行客户端检查，然后允许 ajax 提交整个表单。我在文档中找不到示例，并且我当前的代码不起作用，它使用 GET 查询字符串的值重新加载整个页面。有什么想法吗？谢谢！

 $('#send-form').validator().on('submit', function (e) {

   if (e.isDefaultPrevented()) {
          // handle the invalid form...
    } else {
                        // everything looks good!
       $.post( "/post/ajax",

            $( "#send-form" ).serialize(),

            function( data ) {

                 $( "#ajax-result" ).html( data );

            });

       }
   });

【问题讨论】：

尝试在if (e.isDefaultPrevented())上方添加e.preventDefault()？

标签： jquery ajax twitter-bootstrap

【解决方案1】：

在 else 语句中添加 e.preventDefault()。

如果您查看#227 in the source code，如果表单无效，验证器会阻止表单提交。因此e.isDefaultPrevented() 可用于检查表单是否无效。

如果提交表单的表单有效（页面重新加载的原因），则会执行表单的默认操作。由于您需要执行 ajax，您应该通过 e.preventDefault() 停止默认操作

$('#send-form').validator().on('submit', function (e) {
    if (e.isDefaultPrevented()) {
        alert('form is not valid');
    } else {
        e.preventDefault();
        alert('form is valid');
        // your ajax
    }
});

这是demo

希望对你有帮助

【讨论】：