Question

我正在使用JQuery表单插件（http://malsup.com/jquery/form/）来处理表单的ajax提交。我也插入了JQuery.Validate（http://docs.jquery.com/Plugins/Validation）进行客户端验证。

我所看到的是，当我预期验证时，验证失败，但它不会阻止表单提交。当我使用传统形式（即非ajax）时，验证失败阻止了提交表单....这是我期望的行为。

我知道验证已正确连接，因为在ajax提交发生后仍然会出现验证消息。

那么我错过了什么是阻止了我想要的行为？下面的示例代码....

<form id="searchForm" method="post" action="/User/GetDetails">
        <input id="username" name="username" type="text" value="user.name" />  
        <input id="submit" name="submit" type="submit" value="Search" />   
</form>
<div id="detailsView">
</div>  

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };
    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
    rules: {
    username: {required:true}},
    messages: {
    username: {required:"Username is a required field."}}
    });
</script>

Answer 1

初始化ajaxForm（）时，需要添加一个回调函数以与beforeSubmit事件一起使用：

var options = {
        beforeSubmit: function() {
            return $('#searchForm').validate().form();
        },
        target: '#detailsView'
    };

现在它知道在提交页面之前检查验证结果。

Answer 2

......好吧已经有一段时间了，所以我的情况有所改变。目前我有一个传递给Validate（）插件的submitHandler选项。在那个处理程序中，我手动使用ajaxSubmit。我想是更多的解决方法而不是答案。希望有所帮助。

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({target: "#result"});
    }
});

Answer 3

$('#contactform').ajaxForm({
  success : FormSendResponse, 
  beforeSubmit:  function(){
    return $("#contactform").valid();
  }
});


$("#contactform").validate();

以上代码对我来说很好。

Answer 4

就像第一遍一样，我想知道为什么这条线

$("form").validate({

不是指$（“searchform”）。我没有看过这个，或尝试过，但这似乎是一个不匹配。你不想在适当的表格上调用验证吗？

无论如何，如果这是完全错误的，那么错误并不是立即显而易见的。：）

Answer 5

还要确保所有输入字段都具有“name”属性以及“id”属性。我注意到没有这些，jquery验证插件无法正常运行。

Answer 6

好吧，这是一个老问题，但我会把我们的解决方案放在这里给后代。我个人把这个分类为黑客，但至少它不是hack-tacu-manjaro

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };

// -- "solution" --
$('#searchForm').submit(function(event) {
  this.preventDefault(event); // our env actually monkey patches preventDefault
                              // impl your own prevent default here
                              // basically the idea is to bind a prevent default
                              // stopper on the form's submit event
});
// -- end --

    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
      rules: {
      username: {required:true}},
      messages: {
      username: {required:"Username is a required field."}}
    });
</script>

Answer 7

可能是一个返回false; 在表格上会有帮助吗？ :) 我的意思是：

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;">

JQuery.Validate插件可以阻止提交Ajax表单

7 个答案: