16

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

7 回答 7

15

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

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

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

于 2009-05-10T02:51:17.710 回答
4

...好吧，已经有一段时间了，所以我的情况发生了一些变化。目前我有一个 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"});
    }
});
于 2010-01-15T07:05:46.633 回答
2 
$('#contactform').ajaxForm({
  success : FormSendResponse, 
  beforeSubmit:  function(){
    return $("#contactform").valid();
  }
});


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

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

于 2012-07-01T13:25:13.870 回答
1

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

$("form").validate({

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

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

于 2008-09-26T05:14:28.267 回答
1

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

于 2009-06-16T01:25:48.420 回答
1

好的，这是一个老问题，但我会将我们的解决方案放在这里以供后代使用。我个人将此归类为 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>
于 2011-02-15T17:42:25.597 回答
0

可能是return false；对表格有帮助吗？：） 我是说：

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;">
于 2008-09-26T12:58:54.350 回答