今天使jquery的validate验证时,发现一个问题,当input中name名称一样,validate的验证将绑定第一个错误,从而使整个页面验证失效<%@ page contentType="text/html; charset=GBK" language="java" %>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery/validate/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//遍历页面所有表单,绑定提交后进行遮罩层显示动作 开始
$("form").each(function(){
$(this).validate({
rules:{},
ignore:"hidden", //过滤hidden验证
errorClass:"error" ,//使用自定义的错误提示格式
onsubmit:true,//表单提交时验证
submitHandler:function(form){ //表单验证通过后执行动作
form.submit();
},
//元素未通过验证时执行动作
errorPlacement:function(error, element){
error.insertAfter(element.next());
error.before("</br>");
}
});
//当前表单中含有vaildate属性
if($(this).attr("validate") == "true"){
//遍历当前form中input标签中validateType属性
$(this).find("input[validateType]").each(function(){
var message = "";
//取得当前validateType属性值
var thisInput = $(this).attr('validateType');
var temp = thisInput.split(",");
for(var i=0;i<temp.length;i++){
if($.trim(message) != ""){
message += " 且 ";
}
//分发判断validateType属性值,执行不同的规则
switch(temp[i]){
//数字
case "isNumber":
$(this).rules("add",{number:true});
message += "数字参照格式为123,456或123或-123";
break;
//非空
case "isNull":
$(this).rules("add",{required:true});
message += "不能为空";
break;
}
}
});
}
});
// 结束
});
</script>
</head>
<body>
<form action="#" validate="true">
<input type="text" class="textFieldInput" name="name" maxlength="50" validateType="isNull"/><br />
<input type="text" class="textFieldInput" name="name" maxlength="50" validateType="isNull"/><br />
<input type="submit" value="submit"/>
</form>
</body>
</html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery/validate/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//遍历页面所有表单,绑定提交后进行遮罩层显示动作 开始
$("form").each(function(){
$(this).validate({
rules:{},
ignore:"hidden", //过滤hidden验证
errorClass:"error" ,//使用自定义的错误提示格式
onsubmit:true,//表单提交时验证
submitHandler:function(form){ //表单验证通过后执行动作
form.submit();
},
//元素未通过验证时执行动作
errorPlacement:function(error, element){
error.insertAfter(element.next());
error.before("</br>");
}
});
//当前表单中含有vaildate属性
if($(this).attr("validate") == "true"){
//遍历当前form中input标签中validateType属性
$(this).find("input[validateType]").each(function(){
var message = "";
//取得当前validateType属性值
var thisInput = $(this).attr('validateType');
var temp = thisInput.split(",");
for(var i=0;i<temp.length;i++){
if($.trim(message) != ""){
message += " 且 ";
}
//分发判断validateType属性值,执行不同的规则
switch(temp[i]){
//数字
case "isNumber":
$(this).rules("add",{number:true});
message += "数字参照格式为123,456或123或-123";
break;
//非空
case "isNull":
$(this).rules("add",{required:true});
message += "不能为空";
break;
}
}
});
}
});
// 结束
});
</script>
</head>
<body>
<form action="#" validate="true">
<input type="text" class="textFieldInput" name="name" maxlength="50" validateType="isNull"/><br />
<input type="text" class="textFieldInput" name="name" maxlength="50" validateType="isNull"/><br />
<input type="submit" value="submit"/>
</form>
</body>
</html>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货