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">&nbsp;&nbsp;&nbsp;<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">&nbsp;&nbsp;&nbsp;<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">&nbsp;&nbsp;&nbsp;<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">&nbsp;&nbsp;&nbsp;<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>