jquery $(form).ajaxSubmit不是函数

h79rfbju  于 2022-12-12  发布在  jQuery
关注(0)|答案(8)|浏览(135)

我正在尝试使用jquery validate插件来验证表单,并通过 AJAX 请求提交内容。
此代码位于文档的头部。

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

验证工作正常。但是,通常会在以下情况下提交:在提交时,页面会重新加载。当然,对于没有启用js的浏览器,我有一个非js的回退行为。但是我希望得到更流畅的用户体验。
我在Firebug中看到的错误是:$(form).ajaxSubmit不是函数
我到底做错了什么?

bpsygsoo

bpsygsoo1#

我猜你没有包含jquery表单插件。我相信ajaxSubmit不是jquery的核心函数。
大概是这样的:http://jquery.malsup.com/form/

UPD

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

UPD -已移至github.io

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

o4hqfura2#

这是一个新函数,因此必须在jQuery lib之后添加其他lib文件

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

它会起作用的。。我已经测试过了。。希望它会对你起作用。

rpppsulh

rpppsulh3#

AJAX 使用jquery提交表单而不刷新页面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>
ycl3bljg

ycl3bljg4#

试试看:

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

a0x5cqrl5#

试试ajaxsubmit库,它可以通过ajax进行 AJAX 提交和验证。
此外,配置是非常灵活的,以支持任何类型的UI。
Live demo available,带有js、css和html示例。

1tu0hz3e

1tu0hz3e6#

Drupal 8

Drupal 8不会自动将JS库包含到页面中。因此,如果您遇到此错误,很可能需要将“core/jquery.form”库附加到页面(或表单)中。请将类似以下内容添加到您的呈现数组中:

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

whhtz7ly7#

404错误页面404错误页面使用https协议

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

文件:https://malsup.com/jquery/form/

qcuzuvrc

qcuzuvrc8#

$(form).ajaxSubmit();

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

form.ajaxSubmit();

相关问题