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

Posted 2023-05-08

【中文标题】JQuery.Validate 插件可以阻止提交 Ajax 表单吗

【英文标题】：Can JQuery.Validate plugin prevent submission of an Ajax form

【发布时间】：2010-09-13 08:45:55

【问题描述】：

我正在使用 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>

【问题讨论】：

Berko - 你有没有机会选择正确的答案，或者如果它没有解决你的问题，请告诉我们？

我在下面添加了一个答案。可能会也可能不会帮助你。

【参考方案1】：

在初始化 ajaxForm() 时，需要添加一个回调函数用于 beforeSubmit 事件：

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

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

【讨论】：

糟糕，我不知道这个问题是 7 个月大的......哦，好吧！

+1，很好的答案。它真的帮助了我。我没有使用表单插件，但是，其他人都知道，如果您使用 $.ajax(...) 方法手动将表单与 ajax 绑定，则可以执行相同的操作。唯一的区别是，它不是“beforeSubmit”，而是“beforeSend”。再次感谢。

【参考方案2】：

...好吧，已经有一段时间了，所以我的情况发生了一些变化。目前我有一个 submitHandler 选项传递给 Validate() 插件。在那个处理程序中，我手动使用 ajaxSubmit。比我猜的答案更多的解决方法。希望对您有所帮助。

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

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

【参考方案3】：

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


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

上面的代码对我来说很好用。

【讨论】：

再次，我知道这是一个老问题，但我认为这是最好的答案。一个简单明了的答案。

【参考方案4】：

还要确保所有输入字段都具有“名称”属性和“id”属性。我注意到如果没有这些，jquery 验证插件就无法正常工作。

【参考方案5】：

好的，这是一个老问题，但我会将我们的解决方案放在这里以供后代使用。我个人将此归类为 hack-trocity，但至少它不是 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>

【讨论】：

哇哦给这个人投票，this.preventDefault(event);像魅力一样工作！

【参考方案6】：

作为第一次通过，我想知道为什么这条线

$("form").validate(

不引用 $("searchform")。我没有查过这个，也没有试过，但这似乎是不匹配的。您不想在适当的表单上调用 validate 吗？

无论如何，如果这是完全错误的，那么错误不会立即明显。 :)

【讨论】：

这是我发帖时的疏忽。但即便如此，它也没有什么区别，因为这是页面上唯一的表单 - 所以 $('#searchform') 基本上等同于 $('form')。

【参考方案7】：

可能是 返回假； 对表格有帮助吗？ :) 我的意思是：

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