jquery-validate的问题
我想要验证培训名称和培训周期,我就能写到这了,不好使,再往后不了,还应该怎么写才对,在textfield后面显示错误信息,要红色的字
- JScript code
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="/struts-tags" prefix="s"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>培训类型管理</title> <script type="text/javascript" src="../commons/js/global.js"></script> <script type="text/javascript" src="../commons/widget/jquery/jquery.js"></script> <script type="text/javascript" src="../commons/widget/jquery/jquery.validate.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#trainTypeForm").validate({ rules:{ "trainType.trainTypeName":{ required:true }, "trainType.trainPeriod":{ required:true, number:true } }, messages:{ "trainType.trainTypeName":{ required:"填写培训类型名称!" } "trainType.trainPeriod":{ required:"填写培训周期!", number:"培训周期必须为数字" }, }, focusInvalid:true, onkeyup:true, errorPlacement: function(error, element) { error.appendTo( element.parent()); } }); }); </script></head><body> <link rel="stylesheet" type="text/css" href="../commons/css/css.css"></link> <s:form id="trainTypeForm" name="trainTypeForm" method="post"> <s:hidden name="trainType.trainTypeId" id="trainTypeId"/> <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#666699"> <tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" class="style2"> <tr bgcolor="#f3f7ff" height="24"> <td width="15%" bgcolor="#E0ECF8" align="center"> 培训类型名称: </td> <td width="35%"> <s:textfield name="trainType.trainTypeName" id="trainType.trainTypeName"></s:textfield> </td> <td width="15%" bgcolor="#E0ECF8" align="center"> 上级培训类型: </td> <td width="35%"> ${upTrainTypeName}<s:hidden name="trainType.upTrainTypeId" id="upTrainTypeId"></s:hidden> </td> </tr> <tr bgcolor="#f3f7ff" height="24"> <td width="12%" bgcolor="#E0ECF8" align="center"> 培训周期: </td> <td width="40%"> <s:textfield name="trainType.trainPeriod" id="trainType.trainPeriod"></s:textfield> </td> <td width="12%" bgcolor="#E0ECF8" align="center"> </td> <td width="36%"> </td> </tr> </table> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#FFFFFF"> <tr align="center"> <td> <s:submit value="修改" method="update"/> <s:submit value="新增同级" method="addSame"/> <s:submit value="新增下级" method="addLow"/> <s:submit value="删除" method="remove"/> </td> </tr> </table> </td> </tr> </table></s:form></body>
[解决办法]
var attribute = {
rules:{
"entity.name": {
required:true,
minlength:2,
remote: {url:"questionnaire/json_companyBranch_jsonCheckName.do",
data:{
"entity.uid":function(){return $("#id").val();},
"entity.name":function(){return $("#name").val();},
"entity.companyUid":function(){return $("#companyUid", window.parent.document).val();}
}}
},
"entity.code": {
required:true,
minlength:2,
remote:{url:"questionnaire/json_companyBranch_jsonCheckCode.do",
data:{
"entity.uid":function(){return $("#id").val();},
"entity.code":function(){return $("#code").val();},
"entity.companyUid":function(){return $("#companyUid", window.parent.document).val();}
}}
}
},
messages:{
"entity.name": {
required:"名称不能为空!",
minlength:jQuery.format("最少输入{0}字符或汉字"),
remote: "名称已存在,请重新输入!"
},
"entity.code": {
required:"代码不能为空!",
minlength:jQuery.format("最少输入{0}字符或汉字"),
remote: "代码已存在,请重新输入!"
}
},
errorPlacement: function(error, element) {
if (element.next().size()==0) {
error.appendTo(element.parent());
} else {
error.appendTo(element.next());
}
},
submitHandler: function() {
process();
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
};
function process() {
var url = "questionnaire/json_companyBranch_jsonSave.do";
$.getJSON(url,
{"ran":Math.random(),
"entity.name":$("#name").val(),
"entity.code":$("#code").val(),
"entity.companyUid":$("#companyUid", window.parent.document).val(),
"entity.uid":$("#id").val()
}, function(data){
var r = eval("("+(""+data).replace(/\r\n|\r|\n/g,"")+")");
r.status ? parent.closeDialog(r.message) : showSimpleMessage(r.message);
});
}
$(document).ready(function () {
var validator = $("#form1").validate(attribute);
//var message = $("#message").val();
});