使用带有Jquery ajax表单的Bootstrap validator.js

Question

我正在尝试使用此验证器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 );

            });

       }
   });

Answer 1

添加e.preventDefault()else语句.

如果查看源代码中的#227,如果表单无效,验证程序将阻止表单提交.因此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
    }
});

这是一个演示

希望这可以帮助