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>