$(form).ajaxSubmit 不是函数

Posted 2023-05-09

【中文标题】$(form).ajaxSubmit 不是函数

【英文标题】：$(form).ajaxSubmit is not a function

【发布时间】：2011-07-13 01:29:29

【问题描述】：

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

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

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

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

我在 firebug 中看到的错误是：

我在这里做错了什么？

【问题讨论】：

您是否包含了 jquery 表单插件？ (jquery.malsup.com/form/#getting-started)

您确定您正确加载了库吗？

【参考方案1】：

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

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

UPD

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

【讨论】：

完全正确！感谢您的快速回答...我只是忘记在 html 文档的头部包含表单插件。哇！

Duuuh，要跟踪的脚本太多了！感谢您的回答！

我遇到了类似的问题，但就我而言，我将 jQuery 从 1.3.1 升级到 3.2.1，但我仍然有 jQuery Form Plugin 2.19，它使用了与 jQuery 3.2 不兼容的已弃用代码.1。我的解决方案是升级到与 jQuery 3.2.1 兼容的 jQuery Form Plugin 3.51.0。

【参考方案2】：

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

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

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

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

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

【讨论】：

为提高您的帖子质量，请说明您的帖子将如何/为何解决问题。

【参考方案5】：

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

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

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

【讨论】：

演示链接已损坏

【参考方案6】：

Drupal 8

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

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

【参考方案7】：

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

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

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

【参考方案8】：

$(form).ajaxSubmit(); 

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

form.ajaxSubmit(); 

【讨论】：

什么？甚至不接近真实......为什么会触发任何类型的递归？！