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

时间:2012-11-07 02:58:18

标签: jquery html validation serialization

我尝试在使用jquery.validate插件之前使用http://jsfiddle.net/ongisnade/tzFzR/插件验证表单,但是由于ajax提交在使用validate函数时正常工作,因此失败了。

这是我的表格:

<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;
});

这是我的小提琴:{{3}}

如何在ajax提交之前进行表单验证?

1 个答案:

答案 0 :(得分:4)

在使用.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/