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方法首先包含库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 submition以及通过ajax进行验证。

此外，配置非常灵活，可支持任何类型的用户界面。

Live demo available使用js，css和html示例。

Answer 6

Drupal 8

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

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

Answer 7

$(form).ajaxSubmit();

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

form.ajaxSubmit();

$（form）.ajaxSubmit不是函数

7 个答案: