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

Posted 2023-05-08

【中文标题】将 Bootstrap validator.js 与 Jquery ajax 表单发布一起使用

【英文标题】：Using Bootstrap validator.js with Jquery ajax form post

【发布时间】：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()？

【参考方案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

希望对你有帮助