Ajax表单异步提交及验证

<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>

<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>