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