$(form).ajaxSubmit 不是函数

Question

我正在尝试使用 jquery validate 插件来验证表单并使用 ajax 请求提交内容。

这段代码在我文档的开头。

 $(document).ready(function() {
    $('#contact-form').validate({submitHandler: function(form) {
         $(form).ajaxSubmit();   
         contactSuccess() ;
         }
    });
});

验证有效。 但是，提交是正常进行的：提交时，页面重新加载。 当然，对于没有启用 js 的浏览器，我有一个非 js 后备行为。但我希望获得更流畅的用户体验。

我在 firebug 中看到的错误是： $(form).ajaxSubmit 不是函数

我在这里做错了什么？

Answer 1

我猜你没有包含 jquery 表单插件。 ajaxSubmit 不是核心 jquery 函数，我相信。

类似这样的东西：http://jquery.malsup.com/form/

UPD

<script src="http://malsup.github.com/jquery.form.js"></script> 

Answer 2

这是一个新功能，所以你必须在 jQuery lib 之后添加其他 lib 文件

<script src="http://malsup.github.com/jquery.form.js"></script>

它会工作..我已经测试过..希望它对你有用..

Answer 3

使用 jquery ajax 方法提交不刷新页面的 Ajax 表单首先包含库 jquery.js 和 jquery-form.js 然后在 html 中创建表单：

<form action="postpage.php" method="POST" id="postForm" >

<div id="flash_success"></div>

name:
<input type="text" name="name" />
password:
<input type="password" name="pass" />
Email:
<input type="text" name="email" />

<input type="submit" name="btn" value="Submit" />
</form>

<script>
  var options = { 
        target:        '#flash_success',  // your response show in this ID
        beforeSubmit:  callValidationFunction,
        success:       YourResponseFunction  
    };
    // bind to the form's submit event
        jQuery('#postForm').submit(function() { 
            jQuery(this).ajaxSubmit(options); 
            return false; 
        }); 


});
function callValidationFunction()
{
 //  validation code for your form HERE
}

function YourResponseFunction(responseText, statusText, xhr, $form)
{
    if(responseText=='success')
    {
        $('#flash_success').html('Your Success Message Here!!!');
        $('body,html').animate({scrollTop: 0}, 800);

    }else
    {
        $('#flash_success').html('Error Msg Here');

    }
}
</script>

Answer 4

试试：

$(document).ready(function() {
    $('#contact-form').validate({submitHandler: function(form) {
         var data = $('#contact-form').serialize();   
         $.post(
              'url_request',
               {data: data},
               function(response){
                  console.log(response);
               }
          );
         }
    });
});

Answer 5

试试ajaxsubmit 库。 它通过 ajax 进行 ajax 提交和验证。

配置也非常灵活，可以支持任何类型的 UI。

Live demo available 带有 js、css 和 html 示例。

Answer 6

Drupal 8

Drupal 8 不会自动将 JS 库包含到页面中。因此，如果您遇到此错误，很可能需要将“core/jquery.form”库附加到您的页面（或表单）。将这样的内容添加到您的渲染数组中：

$form['#attached']['library'][] = 'core/jquery.form';

Answer 7

上一个链接返回Http 404：使用https协议：

<script src="https://malsup.github.io/jquery.form.js"></script>

文档： https://malsup.com/jquery/form/

Answer 8

$(form).ajaxSubmit(); 

触发另一个导致递归的验证。尝试将其更改为

form.ajaxSubmit();