jquery - 如何将 jquery.validate 插件与 jquery.serialize() 结合使用

Question

在由 ajax 执行之前，我曾尝试使用jquery.validate插件验证表单，但它失败了，因为在使用 validate 函数时 ajax 提交正在工作。

这是我的表格：

<form>
 <p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /></p>
   <p><label for="cemail">E-Mail</label><em>*</em><input id="cemail" name="email" size="25"  class="required email" /></p>
   <p><label for="curl">URL</label><em></em><input id="curl" name="url" size="25"  class="url" value="" /></p>
   <p><label for="ccomment">Your comment</label><em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea></p>
   <p><input class="submit" type="submit" value="Submit"/></p>
 </form>

我的jQuery代码：

$('form').validate();
$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

这是我的小提琴：http: //jsfiddle.net/ongisnade/tzFzR/

如何在提交ajax之前使表单验证？

Answer 1

使用.valid()前检查.serialize()。

// Initialize
$('form').validate();

// Bind
$('form').submit(function() {
    if($('form').valid())
        alert($(this).serialize());
    else
        alert("Invalid");
    return false;
});​

小提琴：http: //jsfiddle.net/eHD4g/

或者正如Sparky672所说，使用submitHandler属性：

$('form').validate({
    submitHandler: function(form) {
        alert($('form').serialize());
        return false;
    }
});

小提琴：http: //jsfiddle.net/eHD4g/2/