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

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

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

$("form").validate({

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

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