Javascript 验证插件是否可以阻止提交Ajax表单

我使用JQuery表单插件（）来处理表单的ajax提交。我还插入了JQuery.Validate（）用于客户端验证

我看到的是，当我期望验证失败时，验证失败了，但它并没有阻止表单提交。当我使用传统表单（即非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>

变量选项={
目标：“#详细视图”
};
$（'#searchForm'）.ajaxForm（选项）；
$（“#搜索表单”）。验证({
规则：{
用户名：{required:true}}，
信息：{
用户名：{required:“用户名是必填字段。”}
});

作为第一步，我想知道为什么要排队

$("form").validate({

不引用$（“searchform”）。我没有查过，也没有试过，但这似乎是不匹配的。您不想在适当的表单上调用validate吗

无论如何，如果这是完全错误的，那么错误不会立即显现出来。：）

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

---

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

---

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

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

。。。好吧，已经有一段时间了，所以我的情况有点变化。目前我有一个submitHandler选项传递给Validate（）插件。在该处理程序中，我手动使用ajaxSubmit。与其说是答案，不如说是一个变通办法。希望有帮助

---

好的，这是一个老问题，但我将把我们的解决方案放在这里给子孙后代。我个人认为这是一个黑客特洛伊城，但至少它不是一个黑客塔库曼哈罗

<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>

变量选项={
目标：“#详细视图”
};
//-“解决方案”--
$（“#搜索表单”）.submit（函数（事件）{
this.preventDefault（event）；//我们的环境实际上是preventDefault
//在这里输入您自己的默认值
//基本上，这个想法是绑定一个防止默认值
//阻止表单的提交事件
});
//--结束--
$（'#searchForm'）.ajaxForm（选项）；
$（“#搜索表单”）。验证({
规则：{
用户名：{required:true}}，
信息：{
用户名：{required:“用户名是必填字段。”}
});

---

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

当我发布时，这是一个疏忽。但即使这样也没有什么区别，因为这是页面上唯一的表单-所以$（'searchform'）基本上等同于$（'form'）。哎呀，我不知道这个问题已经7个月了。。。哦，好吧+回答得很好。这真的帮了我大忙。我没有使用表单插件，但是，正如其他人所知，如果您使用$.ajax（{…}）方法手动将表单与ajax绑定，您也可以执行同样的操作。唯一的区别是，它不是“beforeSubmit”，而是“beforeSend”。再次感谢。伯克-你有没有可能选择正确的答案或者让我们知道它是否解决了你的问题？我在下面添加了一个答案。可能会也可能不会帮你。Wohoo投票给这个家伙，这个。预防违约（事件）；很有魅力！！我知道这是一个老问题，但我认为这是最好的答案。一个简单明了的回答。

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

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

<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>

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


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