jquery---------ajax+validate表单异步提交验证

$("#submitButton").click(function(){

//序列化表单

   var param = $("#leaveSave").serialize();

   $.ajax({

      url : "leaveSave.action",

      type : "post",

      dataType : "json",

      data: param,

      success : function(result) {

if(result=='success') {

location.href='allRequisitionList.action';

} else if(result.startWith("error_")){

$("#errorMessage").html(result.substring(6));

} else {

//返回的结果转换成JSON数据

var jsonObj = eval('('+result+')');

startTime = $("#startdate").val();

endTime = $("#enddate").val();

hour = jsonObj.hour;

reason = jsonObj.reason;

replaceDom(startTime,endTime,hour,reason);

}

}

});

});

如果想用ajax提交表单，还想用jquery的validate进行验证，可以采用如下方法。

1：表单还是正常编写的表单内容，button还是submit类型，只不过在validate验证通过后的方法中使用ajax提交表单

$("#saveWorkExtra").validate({

onsubmit:true,// 是否在提交是验证

onfocusout:false,// 是否在获取焦点时验证

onkeyup :false,// 是否在敲击键盘时验证

rules: {

....

},

messages:{

....

},

submitHandler: function(form) {  //通过之后回调

     var param = $("#saveToWorkExtra").serialize();

     $.ajax({

url : "workExtraChange.action",

type : "post",

dataType : "json",

data: param,

success : function(result) {

if(result=='success') {

          location.href='allRequisitionList.action';

} else {

          var jsonObj = eval('('+result+')');

}

}

     });

         },

         invalidHandler: function(form, validator) {  //不通过回调

       return false;

          }
});

--------------------------------------------------------------------------------------------

如果想要用type="button"提交，那么就需要多写一个函数。

<input type="button" vaule="提交" onclick="submitForm()">

JS代码：

function submitForm(){

       $("#saveToWorkExtra").submit();

}

这样就可以达到目标了，主要是因为验证是一定要在提交时才能进行的，而不是调用函数时验证的。

-------------------------------------------------------------------------------------------------------------------------------

radio、checkbox、select的验证其实方法与前面提到没有太大的区别，但问题是错误信息会显示在同一组的第一个元素后面
效果如下所示：



解决这个问题的办法是将错误信息指定到一个特定的位置，validate()方法的参数中可以进行自定义，示例代码如下:

复制代码 代码如下:

<script type="text/javascript">

jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称

function(value, element, params) { //addMethod第2个参数:验证方法，

　　　　　　　　　　　　　　　　　　　　//验证方法参数（被验证元素的值，被验证元素，参数）

var exp = new RegExp(params); //实例化正则对象，参数为用户传入的正则表达式

return exp.test(value); //测试是否匹配

},

"格式错误");

$(function() {

$("#signupForm").validate(

{

rules: {

txtPassword1: "required", //密码1必填

txtPassword2: { //密码2的描述多于1项使用对象类型

required: true, //必填，这里可以是一个匿名方法

equalTo: "#txtPassword1", //必须与密码1相等

rangelength: [5, 10], //长度5-10之间

regex: "^\\w+$" //使用自定义的验证规则

},

txtEmail: "email", //电子邮箱必须合法

sex: "required"

},

messages: { //对应上面的错误信息

txtPassword1: "您必须填写",

txtPassword2: {

required: "您必须填写",

equalTo: "密码不一致",

rangelength: "长度必须介于{0} 和 {1} 之间的字符串",

regex: "密码只能是数字、字母与下划线"

}

},

　　　　　　

//在上例中新增的部分

errorPlacement: function(error, element) { //指定错误信息位置

if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox

var eid = element.attr('name'); //获取元素的name属性

error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面

} else {

error.insertAfter(element);

}

},

debug: false, //如果修改为true则表单不会提交

submitHandler: function() {

alert("开始提交了");

}

});

});

</script> <p>

<label for="sex">

性别</label>

<input type="radio" id="rdoFemale" name="sex" />男

<input type="radio" id="rdoMale" name="sex" />女

</p>

运行结果如下：



此外：如果在参数中加上debug:true则只用于调试表单不会提交到服务器; submitHandler: function() {}将会在表单提交到服务器前执行一些操作;用remote可以进行Ajax验证,好像有个小bug;在使用ASP.NET与validate组合使用时会有一些问题可以参考网友的博文。