<script type="text/javascript" src="${pageContext.request.contextPath}/style/common/js/jquery4.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/common/js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/common/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/common/js/jquery.metadata.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/common/js/jquery.validate.rules.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/common/js/jquery.validate.messages_cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/common/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#form1").validate( {
meta :"validate",
errorElement :"em", //可以用其他标签，记住把样式也对应修改
success : function(label) {
//label指向上面那个错误提示信息标签em
label.text("ok").addClass("success"); //加上自定义的success类
},
submitHandler : function(form) {
var options = {
beforeSubmit :showRequest, // pre-submit callback
success :showResponse, // post-submit callback
url :"addRepair.action", // override for form's 'action' attribute
type :"post", // 'get' or 'post', override for form's 'method' attribute
dataType :"html" // 'xml', 'script', or 'json' (expected server response type)
};
$(form).ajaxStart( function() {
$("#showid").show();
}).ajaxSubmit(options);
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
return true;
}
function showResponse(responseText, statusText, xhr, $form) {
if (responseText == 1) {
$('#showid').html("操作成功。");
window.location.href = "repairList.action";
} else if (responseText == 2) {
$('#showid').html("操作失败。");
}
}
}
});
$("#resetButton").click( function() {
$("#form1").resetForm();
$("em").remove();
});
$("#backButton").click( function() {
window.history.back();
});
});
</script>
form1为页面要提交的表单，表单代码及验证如下：
<form id="form1" name="form1" method="post" action=""> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="table" > <input type="hidden" name="repairList.repairId" value="${repairList.repairId }"></input> <tr> <td width="10%" class="table_td_right"> <span class="required">*</span>单号</td> <td width="25%" class="table_td_left_12"><input type="text" class="tdinput_font {validate:{required:true,maxlength:50}}" id="compCode_id" name="repairList.repairNo" value="${repairList.repairNo }" size="20" /></td> <td width="10%" class="table_td_right"> <span class="required">*</span>设备编号</td> <td width="55%" class="table_td_left_12"><input type="text" class="tdinput_font_long {validate:{required:true,maxlength:50}}" id="compName_id" name="repairList.deviceCode" value="${repairList.deviceCode}" size="20" /><em></em></td> </tr> <tr> <td class="table_td_right">设备名称</td> <td class="table_td_left_12"><input type="text" class="tdinput_font {validate:{maxlength:200}}" id="compShort_id" name="repairList.deviceName" value="${repairList.deviceName}" size="20" /></td> <td class="table_td_right">安装位置</td> <td class="table_td_left_12"><input type="text" class="tdinput_font_long {validate:{maxlength:500}}" id="compForeignName_id" name="repairList.deviceLoca" value="${repairList.deviceLoca}" size="20" /></td> </tr> <tr> <td class="table_td_right"> <span class="required">*</span>故障描述</td> <td class="table_td_left_12"><input type="text" class="tdinput_font {validate:{maxlength:500,required:true}}" id="compLegal_id" name="repairList.faultDesc" value="${repairList.faultDesc}" size="20" /></td> <td class="table_td_right"> <span class="required">*</span>维修方式</td> <td class="table_td_left_12"><input type="text" class="tdinput_font {validate:{maxlength:200}}" id="compBuildDate_id" name="repairList.repairWay" value="${repairList.repairWay}" size="20" /></td> </tr> <tr> <td class="table_td_right">负责人</td> <td class="table_td_left_12"><input type="text" class="tdinput_font_long {validate:{maxlength:200}}" id="compAddr_id" name="repairList.fuzeRen" value="${repairList.fuzeRen}" size="20" /></td> <td class="table_td_right">维修公司</td> <td class="table_td_left_12"><input type="text" class="tdinput_font_long {validate:{maxlength:200}}" id="compComunicationAddr_id" name="repairList.repairCompany" value="${repairList.repairCompany}" size="20" /></td> </tr> <tr> <td class="table_td_right">合同文件</td> <td class="table_td_left_12"><%-- <input type="text" class="" id="compTell_id" name="repairList.contractFile" value="${repairList.contractFile}" size="20" /> --%></td> <td class="table_td_right">费用</td> <td class="table_td_left_12"><input type="text" class="" id="compPostcode_id" name="repairList.fee" value="${repairList.fee}" size="20" /></td> </tr> <tr> <td class="table_td_right">备注</td> <td colspan="3" class="table_td_left_12"><textarea id="compRemark_id" name="repairList.remark" cols="100" rows="6" class="textareaClass {validate:{maxlength:500}}">${repairList.remark}</textarea></td> </tr> <tr> <td class="table_td_right">流程</td> <td colspan="3" class="table_td_left_12"> <input readonly="readonly" type="text" class="que_input {validate:{required:true,maxlength:100}}" id="proName" name="" value="${repairList.processId}"> <input type="button" class="bt_que" value="选择" onclick="choosePro()"> <input type="hidden" name="repairList.processId" id="proId" value="${repairList.processId }"/> </td> </tr> <tr> <td colspan="4" class="p5 btn_table_td"> <input type="submit" name="" id="saveButton" value="保存" class="b_t"/> <input type="button" name="" id="resetButton" value="重置" class="b_t"/> <input type="button" name="" id="backButton" value="返回" class="b_t"/> </td> </tr> </table> </form>