Jquery validate 和Jquery Ajax

有关Jquery validate其实在w3c上有很详细的讲解，这里我只说一下我遇到的问题。

Jquery validate用于在提交表单的时候进行前端校验，当Jquery validate 和ajax仪器使用时，

首先要考虑到的问题是加载顺序

我们知道当访问一个页面的时候，其加载顺序是：域名解析-->加载html-->加载css和js-->加载图片

jquery validate是在ajax之前执行

其次：具体使用方法如下

引入包

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/validate/jquery.validate.js"></script>

添加validate.js文件，在该文件中写js校验

function validateForm() {

var validator = $("#myForm").validate({
onsubmit:true,// 是否在提交是验证
submitHandler:function(form) {
    ajaxSubmit();
    },
   rules: {
    userName: {
    required:true
    },
    sex: {
    required:true
    },
      checkbox: {
      required:true
      }
   },
     messages: {
    userName: {
    required:"请输入您的姓名"
    },
    sex: {
    required:"请选择您的性别"
    },
     checkbox: {
    required:"请选择您的爱好"
     }
   },
   errorPlacement: function(error, element) { //指定错误信息位置 
    if (element.is(":radio") ) { //如果是radio 
   
    error.appendTo(element.parent().next()); //将错误信息添加当前元素的父结点后面 
    } else if(element.is(":checkbox")){//或checkbox
   
    error.appendTo(element.parent().parent()); //将错误信息添加当前元素的父结点后面 
    }else{ 
    error.insertAfter(element); 
    } 
    } 
    //debug: true, //如果修改为true则表单不会提交
    //通过之后回调
 }); 
}

jsp页面

function doSubmit() {
    validateForm();
    //do something else...
}
function ajaxSubmit(){
 
var userName = $("#userName").val().trim(); 
var sex = $("input[type='radio']:checked").val();
var str="";    
 $('input[name="checkbox"]:checked').each(function(){    
str+=$(this).val()+",";   
 }); 
 var chk_value = str.substring(0,str.length-1).trim(); 
$.ajax({
url:"${pageContext.request.contextPath}/applyClub",
type:"POST",
async: false,
data:{
 "userName":userName,
 "sex":sex,
 "chk_value":chk_value},  
//data:$("#myForm").serialize(),
dataType:"json",
success:function(data){
alert(data.message);
},
error:function(data){
alert(data.message);
}
});  

}

我遇到的问题：

1.radio和chechbox的校验

我采用了两种方式

1.对于radio我写在了validate.js文件中了

2.对于checkbox，我在jsp页面使用了class方式，使用这种方式首先需要引入jquery.metadata.js包，

具体写法：

<span>
<input type="checkbox" name="checkbox" id="id1" value="篮球" calss="{required:true,messages:{required:'请选择您的爱好'}}"/> 篮球 
</span>

最后注意的问题是：

不要把ajax写在validate文件中，否则会产生url乱码问题，具体什么原因我也没搞清楚，

还请各位朋友予以解决。